可移动清单项目

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

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

有没有什么突出的不正确？或者有更好的方法去解决这个问题吗？我是全新的，并欣赏任何和所有feedback.Thank你！

来源

2013-03-02 user2125606

我们展示你的HTML代码。或者更好的，在www.jsfiddle.net上制作一个JsFiddle并在这里分享。 – 2013-03-02 01:05:07

我发现一个错字，并将'item'改为'.item'，现在它使我列表中的所有项目消失，而不仅仅是我点击的项目。在此之后，它也不会让我添加任何其他内容到我的列表中。对不起所有的阅读！ – user2125606 2013-03-02 01:07:10

我会去JsFiddle和分享我得到的 – user2125606 2013-03-02 01:07:38

我分叉的小提琴，以纠正代码：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>

来源

2013-03-02 01:12:33 lmortenson

现在发生了什么是，当我点击文本框，它只是添加一个名为“待办事项”的列表项旁边的复选框。当我点击一个复选框时，它将删除最后一个项目，而不是我检查的项目。这是我的新代码：http：// jsfiddle。net/LC7bH/6/ – user2125606 2013-03-02 01:27:14

试试我的回答顶部的小提琴 – lmortenson 2013-03-02 01:28:31

非常感谢！这真的有帮助。这只是我的第二天，我不知道我在做什么！ – user2125606 2013-03-02 01:37:04

可移动清单项目

回答

相关问题