How can I remove the items from the list by clicking on the x?

Question

How can I remove the items from the list by clicking on the x?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a list with the header to do whose elements I can pass to the list that has the header Done:

It works correctly for me to move the elements from one list to the other, but I'm not sure how I can eliminate the item from the list that I clicked on.

When the x is pressed (in the code it is a span with class delete), the task must be deleted and it must not be passed to the other list.

$(document).ready(function() {
  $('.todo').on('click', 'li', function() {
    $(this).appendTo('.done');
  });

  $('.done').on('click', 'li', function() {
    $(this).appendTo('.todo');
  });
});

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.list {
  display: inline-block;
  width: 330px;
  vertical-align: top;
  margin: 0 50px;
}

ul {
  font-size: 18px;
  background-color: #f5f5f2;
  padding: 0;
  min-height: 50px;
  border: 1px solid #DBDBD3;
}

ul li {
  position: relative;
  color: #66665D;
  list-style-type: none;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid #DBDBD3;
}

ul li:last-child {
  border-bottom: none;
}

ul.done li {
  color: #ABABA4;
  text-decoration: line-through;
}

ul .delete {
  position: absolute;
  top: 20px;
  right: 10px;
  color: #ccc;
  font-weight: bold;
  text-shadow: 1px 1px white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="list">
    <h3>Por hacer:</h3>
    <ul class="todo">
      <li>Sacar la ropa <span class="delete">x</span></li>
      <li>Lavar los platos <span class="delete">x</span></li>
      <li>Hacer la cama <span class="delete">x</span></li>
      <li>Leer un rato <span class="delete">x</span></li>
      <li>Terminar este reto <span class="delete">x</span></li>
      <li>Sacar al perro <span class="delete">x</span></li>
    </ul>
  </div>

  <div class="list">
    <h3>Hecho:</h3>
    <ul class="done">
    </ul>
  </div>
</div>

jquery html5 css3

asked by García Henry 13.11.2017 в 03:57

source

2 answers

0

You can put together each li and that x is a button and with onclick="" call a function in javascript that does something like:

function remove(elemento)
    {
        var id=elemento.parentNode.getAttribute("id");
        node=document.getElementById(id);
        node.parentNode.removeChild(node);
    }

I hope you understood and served. Greetings

answered by 13.11.2017 в 04:15

Error with group by in mysql 5.7 Keep a row selected in a DataGridView when updating

score 1 · Accepted Answer

You have to listen to the event click to the class delete of the element span , then access the parent (li) using parent () , and then remove ( remove () ) the element.

Why does that elimination referencing a class that does not have that list when the elements of the first list are added?

In line $(this).appendTo('.done'); you are adding the element li to the list including span with class delete

If you want to delete the item from the first list, you could add a condition that points to the clickeado element, this by the e.target , we ask if your class is equal to delete we eliminate it, otherwise we add to the second list.

$(function() {
   //Si le da click al li, preguntamos si fue al span o no
   $('.todo').on('click', 'li', function(e){ 
       if($(e.target).attr('class') ==="delete"){
         $(this).remove();
       }
       else{
         $(this).appendTo('.done');
       }
    });
     //Si le da click al delete span , pasamos a la primera  lista
    /*$('.done').on('click', '.delete', function(){    
       $(this).parent().appendTo('.todo');
    });*/
    
    //Si desea que al dar click al li, pasara a la primera fila
    // sin importar que se de o no en el span.
    $('.done').on('click', 'li', function(){    
       $(this).appendTo('.todo');
    });
});

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.list {
  display: inline-block;
  width: 330px;

  vertical-align: top;
  margin: 0 50px;
}

ul {
  font-size: 18px;
  background-color: #f5f5f2;
  padding: 0;
  min-height: 50px;
  border: 1px solid #DBDBD3;
}

ul li {
  position: relative;
  color: #66665D;
  list-style-type: none;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid #DBDBD3;
}

ul li:last-child {
  border-bottom: none;
}

ul.done li {
  color: #ABABA4;
  text-decoration: line-through;
}

ul .delete {
  position: absolute;
  top: 20px;
  right: 10px;
  color: #ccc;
  font-weight: bold;
  text-shadow: 1px 1px white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="list">
    <h3>Por hacer:</h3>
    <ul class="todo">
      <li>Sacar la ropa<span class="delete">x</span></li>
      <li>Lavar los platos <span class="delete">x</span></li>
      <li>Hacer la cama <span class="delete">x</span></li>
      <li>Leer un rato <span class="delete">x</span></li>
      <li>Terminar este reto <span class="delete">x</span></li>
      <li>Sacar al perro <span class="delete">x</span></li>
    </ul>
  </div>

  <div class="list">
    <h3>Hecho:</h3>
    <ul class="done">
    </ul>
  </div>
</div>