Question

我无法一次只删除一个表单。在我的代码中，我可以添加表单。但是当我想一次只删除一个表单时，除了第一个表单外，所有已创建的表单都会被删除。到目前为止我的代码：

<div>
<form class="form" action="" method="" > 
  product:<input type="text">
  price:<input type="text">
  <button class="r">remove</button>
</form>
</div>


<div class="class"> </div>
<button class="add"> add </button>

jquery的：

$('.add').on('click', function(){
var $clone = $('.form').clone();
$('.class').append( $clone ); 

}); 

$('.r').on('click', function(){ 
$('this').parent('form').remove();
//$('this').parent('div').remove();// even this gives the same result

});

感谢。你是对的。我得到了答案。

Answer 1

主要问题是$('this')不是$(this)。但这不是唯一的问题。

您的“删除”功能仅应用于第一个“.r”元素，因为您不进行深度克隆（您不想复制值），也不会克隆事件侦听器。

我建议使用事件委托$(document).on('click', '.r', ...将事件监听器绑定到文档（如果可能，可以增加特异性以减少开销）并监听与选择器匹配的元素上的事件（在本例中为'.r'）

此外，由于按钮会导致表单提交，因此您必须确保返回false（或使用事件的.preventDefault()方法）以阻止表单在按钮位于内部时提交表格。

最后，如果您多次使用jQuery对象来限制开销，则应该缓存它们。

var form = $('.form');
var target = $('.target');
$('.add').on('click', function(){
    target.append(form.clone());
});
$(document).on('click', '.r', function(){ 
    $(this).parent().remove();
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form class="form" action="" method=""> 
        product:<input type="text">
        price:<input type="text">
        <button class="r">remove</button>
    </form>
</div>

<div class="target"></div>
<button class="add">add</button>

Answer 2

试试这个。以下是要记住的事项。 - 如果您尝试在事件期间附加动态html，则需要在同一函数中引用任何相应的事件（例如单击）。此外，由于您使用按钮进行添加 - 删除而不提交表单，因此您可以使用常规输入类型的按钮替换这些按钮。

<div>
<form class="form" action="" method="" > 
  product:<input type="text">
  price:<input type="text">
  <input type="button" class="r" value="Remove"/>
    </form>
</div>


<div class="class"> </div>
<input type="button" class="add" value="Add"/>

$('.add').on('click', function(){
var $clone = $('.form').clone();
$('.class').append( $clone ); 
$('.r').on('click', function(e){ 
$(this).parent('.form').remove();
});
});

http://jsfiddle.net/gmyag5oe/

删除表单会删除所有已创建的表单

2 个答案: