Question

我有一个带有输入字段和按钮的表单。我想在按钮上单击以在我的list div中添加div，其中包含输入字段中的内容。然后，我想在每次点击它们时删除每个div。

我创建了一个脚本，在按钮点击时添加它们，并且应该在单击div时删除它们。

$(document).ready(function () {
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd +
            '</div>');

    });

    $('.item').click(function () {
        $(this).remove();
    });


});

h2 {
    font-family:arial;
}
form {
    display: inline-block;
}
#button {
    display: inline-block;
    height:20px;
    width:70px;
    background-color:#cc0000;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
}
.list {
    font-family:garamond;
    color:#cc0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>To Do</h2>

<form name="checkListForm">
    <input type="text" name="checkListItem" />
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>

单击按钮时会添加div，但点击它们时没有任何反应。他们应该被删除。

为什么单击它们时不会删除附加的divs？

Answer 1

因为点击仅在调用时附加到dom元素，所以您应该执行类似

的操作

$('body').on('click', '.item', function() {
    $(this).remove();
});

Answer 2

因为当您选择要添加事件侦听器的元素时，它们不在DOM中。试试这个。

JSFiddle

<强> JS

$(document).ready(function(){
    $('#button').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('<div class="item">' + toAdd + '</div>').click(function() {
            $(this).remove();
        }).appendTo('.list');
    });
});

Answer 3

您使用的$（＆＃39; .item＆＃39;）选择器不匹配（最初）任何标记，因此它不会执行任何操作。你需要使用.on来询问jquery以匹配未来的标签。见http://jsfiddle.net/db8jX/2/

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

Answer 4

其他人已经回答了这个问题，但是这是另一种解决方案，您可以使用它来使附加的div在点击时消失：

$(document).ready(function(){
    $('#button').click(function(){
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item" onclick="$(this).remove()">' + toAdd + '</div>');
    });
});

Fiddle

删除附加的div

4 个答案: