0

Tengo una lista con el encabezado por hacer cuyos elementos puedo pasar a la lista que tiene el encabezado Hecho:

Me funciona correctamente el pasar los elementos de una lista hacia la otra, pero no tengo claro cómo puedo eliminar el elemento de la lista al que le dé click en la x.

Cuando se oprime la x (en el código es un span con clase delete), se debe eliminar la tarea y no debe pasarse a la otra lista.

introducir la descripción de la imagen aquí

$(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>

2 respuestas 2

1

Tiene que escuchar el evento click a la clase delete del elemento span , luego acceder al padre (li) mediante parent() , para luego remover (remove()) el elemento.

Por qué hace esa eliminación referenciando una clase que no tiene esa lista cuando se adicionan los elementos de la primera lista?

En la línea $(this).appendTo('.done'); está añadiendo el elemento li a la lista incluido el span con la clase delete

Si lo que desea es eliminar el elemento de la primera lista podría añadir una condición que apunte al elemento clickeado, esto mediante el e.target , preguntamos si su clase es igual a delete lo eliminamos , caso contrario añadimos a la segunda lista.

$(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>

3
  • El ejemplo que añadí es funcional , si ejecuta desde aquí lo hace correctamente (puede verificar esto), el motivo por lo cuál no elimina puede ser otro, verifique bien mi respuesta o quizá en consola si muestra algún error.
    – Dev. Joel
    el 13 nov. 2017 a las 3:42
  • Trate de hacer lo contrario, que pueda eliminar los elementos de la primera lista cuando doy click en la x. está eliminando el elemento de la segunda lista que no tiene la clase delete. Porque hace esa eliminanciando referenciando una clase que no tiene esa lista cuando se adicionan los elementos de la primera lista?. Trate de hacer lo contrario cambiando el nombre de la clase done por todo y no me funcionó. el 13 nov. 2017 a las 3:58
  • @GarcíaHenry revise mi respuesta actualizada, espero ayude. Saludos
    – Dev. Joel
    el 13 nov. 2017 a las 4:17
0

Puedes ponerle unid a cada li y que la x sea un boton y con onclick="" llamar a una funcion en javascript que haga algo como:

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

Espero que hayas entendido y te sirva.Saludos

2
  • No debo modificar el código html ni el de css, debo de hacer la implementación solo con el código de jquery. Supongo que debo de buscar como saber cual es el indice del li seleccionado y buscar remover ese elemento que lo contiene. el 13 nov. 2017 a las 3:17
  • Ya me funcionó, era implementar el mismo código pero haciendo lo contrario con la primera lista. el 13 nov. 2017 a las 5:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.