Question

这是代码：

$('.add').click(function() {

var description = $('#description').val();
$(".append_data").append('<div class="row" style="background: #e6e6e6; color: #666; border-bottom: solid 1px #fff;"><div class="col-md-3"><input type="text" name="1"></div><div class="col-md-5"><input type="text" name="2"></div><div class="col-md-2"><input type="text" name="3"></div><div class="col-md-2"><input type="text" name="4"></div></div><div class="remove">Remove</div>');

});

$('.append_data').on('click', '.remove', function(e) {
    //alert('boom');
  e.preventDefault();
  $(this).closest('.row').remove();
  return false;
});

以下是代码的小提琴： https://jsfiddle.net/L7su5ke7/

它添加了几个div，好吧。但是如何通过一次点击删除它们 - 唉！我还没弄明白（（我已经尝试过“最近的”和“父母”，但没有运气

Answer 1

我所做的是，我将您动态添加的html代码附加到另一个<div>

$('.add').click(function() {

var description = $('#description').val();
$(".append_data").append('<div><div class="row" style="background: #e6e6e6; color: #666; border-bottom: solid 1px #fff;"><div class="col-md-3"><input type="text" name="1"></div><div class="col-md-5"><input type="text" name="2"></div><div class="col-md-2"><input type="text" name="3"></div><div class="col-md-2"><input type="text" name="4"></div></div><div class="remove">Remove</div></div>');

});

$('.append_data').on('click', '.remove', function(e) {
  e.preventDefault();
  $(this).parent().remove();
});

然后在单击删除按钮时删除父项！

链接：jsfiddle link

Answer 2

试试这个：

$('.append_data').on('click', '.remove', function(e) {
  $(this).parent().find('.row').each(function(){
    $(this).remove();
   });
  return false;
});

Answer 3

https://jsfiddle.net/1z40zrqt/2/

$('.append_data').on('click', '.remove', function(e) {

  e.preventDefault();

  $(this).parent().empty();
  return false;
});

Answer 4

这个怎么样 -

$('.append_data').on('click', '.remove', function(e) {
  //alert('boom');
  $('.row').remove();
  $('.remove').remove();

  return false;
});

Jquery只需单击一下即可添加和删除多个div

4 个答案: