How do I delete an entry with jQuery?

Question

How do I delete an entry with jQuery?

Navigation

#1 by (1 votes)

-1

I am creating a task app with jQuery, to practice nothing else but I have a problem when it comes to eliminating a task, here's the code I hope you can help me

The jQuery code is:

$(".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();
});

HTML code

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

javascript jquery html

asked by Jhoan Corrales 01.09.2017 в 20:09

source

1 answer

Avoid repeated names in c ++ arrangement Sudoku c ++ how to check if there are repeated numbers in an array or a multidimensional array [closed]

score 1 · Accepted Answer

Hello!

I see several problems in your jQuery code.

Firstly, you are using functions / methods that do not serve to remove the elements from the DOM, but to hide them, which are fadeOut () , fadeToggle () and slideUp () , each of these methods hides the elements in different ways and which you can read in the jQuery documentation.

The methods that you should use to delete are empty () and remove ()

Another problem that I see, is that you are not using the delegation of events , which allows you to work with aggregative elements after the DOM has been loaded. For more information on that, here .

And as a tip, first learn to know what the DOM is, so you'll know how to move through it through 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>