0

Tengo en este código jQuery unas tareas que el usuario lista y luego de esto, al querer eliminarlas, aparece una alert confirmando dicha acción, pero no una vez, sino varias veces... no entiendo por qué.

$(document).ready(function(){
    $("#btnAdd").on("click", function(){
        let valor = $("input").val();
        if(valor!==''){
            let elemento =$("<li></li>").text(valor);
            $(elemento).append("<button class='clear'>✓</button>");
            $("#lista").append(elemento);n
            $("input").val("");
            $(".clear").on("click", function(){
                $(this).parent().remove();
                alert("Tarea eliminada");
            });
        }
    });
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ejercicio</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script asycn src="main.js"></script>
</head>
<body>
    <header>
        <h1>Tareas</h1>
    </header>
    <input type="text" placeholder="Nueva tarea">
    <button id="btnAdd">Añadir tarea</button>
    <ul id="lista"></ul>
</body>
</html>
3
  • Si no compartes al menos una pieza de tu HTML, nos va a resultar difícil reproducir tu error. ;)
    – Bettylex
    el 21 sep. 2021 a las 10:36
  • Tienes razón @Bettylex, acabo de compartir el código HTML pues la respuesta colocada de DotNosy no me funcionó el 21 sep. 2021 a las 17:40
  • Pues, gracias a eso, pude reproducir tu error. :)
    – Bettylex
    el 21 sep. 2021 a las 18:12

2 respuestas 2

1

Lo que sucede es que se detonan tantas alertas como tareas hubiera por la propagación del event listener. Impídelo introduciendo e.stopImmediatePropagation() al principio de la función de eliminar.

Yo también pienso que es más correcto sacar la función de eliminar fuera de la de añadir, por eso en el jsfiddle lo encontrarás así. Aunque, si la prefieres dentro, puedes trasladarla y el código funcionará igualmente. ;)

$(document).ready(function() {
  $("#btnAdd").on("click", function() {
    let valor = $("input").val();
    if (valor !== '') {
      let elemento = $("<li></li>").text(valor);
      $(elemento).append("<button class='clear'>✓</button>");
      $("#lista").append(elemento);
      $("input").val("");
    }
    $(".clear").on("click", function(e) {
      e.stopImmediatePropagation();
      $(this).parent().remove();
      alert("Tarea eliminada");
    });

  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ejercicio</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script asycn src="main.js"></script>
</head>

<body>
  <header>
    <h1>Tareas</h1>
  </header>
  <input type="text" placeholder="Nueva tarea">
  <button id="btnAdd">Añadir tarea</button>
  <ul id="lista"></ul>
</body>

</html>

0

prueba a poner tu código de clear fuera del evento click de añadir

$(document).ready(function(){
    $("#btnAdd").on("click", function(){
        let valor = $("input").val();
        if(valor!==''){
            let elemento =$("<li></li>").text(valor);
            $(elemento).append("<button class='clear'>✓</button>");
            $("#lista").append(elemento);n
            $("input").val("");
        }
    });

    $(".clear").on("click", function(){
        $(this).parent().remove();
        alert("Tarea eliminada");
     });
});

Espero que te sirva. Un saludo :)

1
  • probé tu respuesta y no me funcionó. Recuerda siempre que cuando acá hagas una respuesta debe funcionar, de lo contrario, si no estás seguro, entonces debes de colocarla como comentario. Puedes leer más sobre cómo responder en: es.stackoverflow.com/help/how-to-answer el 21 sep. 2021 a las 17:46

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.