2

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

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

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

4

1 回答 1

1

我用更正的代码叉了你的小提琴：http: //jsfiddle.net/XEDHJ/2/

这是您遇到麻烦的地方：

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

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

因为我将您的输入包装在<div>标签中，所以我们实际上想要删除该 parent <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>
于 2013-03-02T01:12:33.087 回答