-1

Estoy creando una app de tareas con jQuery, para practicar nada más pero tengo un problema a la hora de eliminar una tarea, aquí les dejo el código espero puedan ayudarme

El código jQuery es:

$(".agregarBtn").click(function(){

   var texto  = $(".agregarTxt").val();
   var cuadro = $('<div></div>').text(texto);
   var boton  = $("<button class='btn-delete'>Eliminar</button>");
   cuadro.attr("class","tarea");
   cuadro.append(boton);
   $(".tareas_nuevas").prepend(cuadro);
   $(".agregarTxt").val("");
   $(".btn-delete").fadeOut();
});

$(".btn-erase").click(function(){
    $(".btn-delete").fadeToggle();
});

//Esta es la función para eliminar las tareas 
$(".btn-delete").click(function(){
  $(this).parent().slideUp();
});

Código HTML

<div class="entrada">
  <input class="agregarTxt" type="text" placeholder="Entrada nueva"/>
  <button class="agregarBtn">Agregar</button>
  <button class="btn-erase">Eliminar tareas</button>
</div>
<div class="tareas_nuevas">
 <!--AQUI VAN LAS TAREAS NUEVAS-->
</div>
2
  • Cuando le doy eliminar no pasa nada 🙇 Commented el 1 sept. 2017 a las 18:47
  • El problema es que asocias el evento del borrado antes de crear el propio botón de borrado. Busca qué son los eventos delegados en jQuery y encontrarás respuestas que te servirán.
    – Alvaro Montoro
    Commented el 1 sept. 2017 a las 18:48

1 respuesta 1

1

¡Hola!

Veo varios problemas en tu código de jQuery.

Primeramente, estás usando funciones/métodos que no sirven para eliminar del DOM los elementos, si no para ocultarlos, los cuales son fadeOut(), fadeToggle() y slideUp(), cada uno de estos métodos oculta los elementos de diferente manera y los cuales puedes leer en la documentación de jQuery.

Los métodos que tu debes de utilizar para eliminar son empty() y remove()

Otro problema que veo, es que no estas utilizando la delegación de eventos, la cual te permite trabajar con elementos agredados después de haberse cargado el DOM. Para más información sobre eso, aquí.

Y como consejo, primero aprende a saber que es el DOM, así sabrás como moverte a través de el por medio de jQuery.

$(document).ready(function(){
  $(".agregarBtn").click(function(){

     var texto  = $(".agregarTxt").val();
     var cuadro = $('<div></div>').text(texto);
     var boton  = $("<button class='btn-delete'>Eliminar</button>");
     cuadro.attr("class","tarea");
     cuadro.append(boton);
     $(".tareas_nuevas").prepend(cuadro);
     $(".agregarTxt").val("");
     //$(".btn-delete").fadeOut();
  });

  $(".btn-erase").click(function(){
      //$(".btn-delete").fadeToggle();
      $('.tareas_nuevas').empty();
  });

  //Esta es la función para eliminar las tareas 
  /*$(".btn-delete").click(function(){
    //$(this).parent().slideUp();
    $(this).parent().remove();
  });*/
  
  $('.tareas_nuevas').on('click', '.btn-delete', function(){
    $(this).parent().remove();
  });

});
<div class="entrada">
  <input class="agregarTxt" type="text" placeholder="Entrada nueva"/>
  <button class="agregarBtn">Agregar</button>
  <button class="btn-erase">Eliminar tareas</button>
</div>
<div class="tareas_nuevas">
 <!--AQUI VAN LAS TAREAS NUEVAS-->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • 1
    Vale muchas gracias, no tenía conocimiento del .on() ya puede por fin terminarlo 👌 Commented el 2 sept. 2017 a las 21:33

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.