如何使用 remove 删除附加元素

Question

我有一个包含 2 div 的简单代码。一个 div 包含一个名为 "add" 的按钮。单击后，将在第二个 div 中添加其他按钮。当您单击第二个 div 中的任何按钮时，它会自行删除。正如您在下面的代码中看到的，我在第二个 div 中使用追加添加按钮。这就是我的问题所在。如果删除按钮已经在 div 中，则代码有效。（这意味着它会在单击时删除）。但是附加的按钮不会自行删除。我如何使添加的按钮在单击时自行删除？

<title>AutoSuggestion using  Ajax, Jquery and PHP</title>

<script src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript">

$(document).ready(function(){


            $('#add').click(function(){
                var return_value = "appended button (click to delete me)";
                $('.seconddiv').append('<button class ="remove">'+return_value+'</button>'); 


            });
            $( '.remove' ).click(function() {
              $( this ).remove();

            });

});


</script>

<div class="firstdiv"><button id ="add" >add</button></div>
<div class="seconddiv"><button class ="remove" >click to delete me</button></div>

Answer 1

这是一个重新绑定问题

http://jsfiddle.net/87pt31La/

$(document).ready(function(){

    //intial call on load
    bindFunc()

    $('#add').click(function(){
        var return_value = "appended button (click to delete me)";
        $('.seconddiv').append('<button class ="remove">'+return_value+'</button>'); 
         bindFunc()
    });

    //any Js code that needs to be rebinded
    function bindFunc(){
        $( '.remove' ).click(function() {
              $( this ).remove();
        });
    }


});

当你添加新的 html 时，它没有绑定到 JS，所以你必须重新绑定它。

Answer 2

您可以将点击事件处理程序更改为附加到文档。

$( document).on("click", ".remove",function() {
      $( this ).remove();
});

http://jsfiddle.net/q56odb3r/

如何使用 remove 删除附加元素

how to delete appended element using remove

button

append