javascript - 可移动 list 项目

Question

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

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

有什么明显不正确的地方吗？还是有更好的方法来解决这个问题？我对此很陌生，感谢所有反馈。谢谢!

Answer 1

我用更正的代码 fork 了你的 fiddle :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() .

我在下面留下了我的原始示例，但这应该足以让您继续。

---

看起来像这样的东西就是你要找的东西:

fiddle

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>