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>