Skip to main content
se añadieron 798 caracteres en el cuerpo
Origen Enlace

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>

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

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

¿Por qué en este código jQuery al eliminar las tareas listadas el alert que confirma dicha acción aparece varias veces y no solo una?

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