Question

我正在尝试创建一个交互式待办事项列表，在该列表中我将文本输入到文本框中，单击按钮，然后添加下面的项目。到目前为止，我已经成功地使用按钮将项目添加到我的列表中，但是无法通过单击一次删除一个项目，这是我希望能够做到的。（理想情况下，每个项目旁边都有一个复选框，当我点击该项目时会消失）。到目前为止，使用.remove（）操作我只能通过单击使列表中的所有项目消失。我做了一些研究，并认为.on（）动作可能就是我需要的。我尝试过，现在我根本无法让物品消失。这是我的代码：

$(document).ready(function() {
    $('#button').click(function() {
        var toAdd=$('input[name=checkListItem]').val();
        $('#item').append.('.list');
    });
    $(document).on('click','item',function() {
        $(this).remove();
    });
});

有什么突出的不正确吗？或者有更好的方法来解决这个问题吗？我是全新的，感谢任何反馈。谢谢！

Answer 1

我用错误的代码分叉你的小提琴：http://jsfiddle.net/XEDHJ/2/

这是你遇到麻烦的地方：

$('.list').on('click','input',function() {
    $(this).parent().remove();
});

使用on是正确的想法，它非常适合这种情况。您使用on的方式是您拥有父节点，在这种情况下是一个类list的div，以及一些匹配的child nodes，在这种情况下，父节点下面的任何元素都是input。子节点由第二个参数中的选择器表示。这将匹配div下的任何输入节点，即使它们是在呈现页面后创建的。

由于我将您的输入包装在<div>标记中，因此我们实际上要删除该父<div>。所以我们打电话给$(this).parent().remove()。

我在下面留下了我的原始示例，但这应该足以让你前进。

看起来像这样你正在寻找的东西：

<强>小提琴

http://jsfiddle.net/Khesy/

<强>的JavaScript

$(document).ready(function() {
    $('#button').click(function() {
        $('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
    });
    $('#item').on('click','input',function() {
        $(this).parent().remove();
    });
});

<强> HTML

<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>

可拆卸清单项目

1 个答案: