使用 jquery 删除添加的元素

Question

我想要完成的两件事。 1）使用克隆方法我希望用户能够添加多个文本框项目，并在文本框旁边添加一个删除链接，而不是像现在这样在它下方。 2）。单击“删除”链接时，我想删除父列表项并删除链接。我四处寻找答案，但没有找到答案。另外，如果比克隆更好的方法可行，我愿意提供建议和解释。

My jsfiddle code:

$('#click').click(function(){
var clone = $('li:last').clone()
if(!clone.find('.del')[0]) clone.append('<a href="#" class="del">Delete</a>')

clone.appendTo('ul');
    });

$('ul').on('click', 'li .del', function(){
     $(this).closest('li').remove();
        });

Answer 1

查看您更新的小提琴http://jsfiddle.net/juanpastas/56wuv/17/

基本上你需要处理尚未创建的元素中的事件：

$('ul').on('click', 'li .del', function(){

为了使用这个选择器

$(this).closest('li')

您实际上需要将$(this)，即.del 元素放入li 元素中

var clone = $('li:last').clone().append('<a href="#" class="del">Delete</a>')
clone.appendTo('ul');

更新

if(!clone.find('.del')[0]) clone.append('<a href="#" class="del">Delete</a>')

clone.find('.del') // returns elements with del class inside the cloned element
[0]                // gets the first element in these elements, undefined if no del elements found
!                  // negates undefined, i.e. true,

// so code enter if when there is no del element

clone.append('<a...'  // append delete if there is no delete link

Answer 2

两件事：

1）您仅在加载时绑定您的偶数，因此当您创建链接时，它没有任何操作，请使用jQuery on()。

$(document).on('click', '.del',function(){...}

2) 最接近的搜索父母，你想要以前的li，所以使用jQuery prev()

这里有一个小提琴：http://jsfiddle.net/56wuv/15/