Question

我是jQuery的新手，正在尝试创建一系列简单的测试行，并能够通过单击添加按钮来创建新行，并通过单击其对应的“删除”文本来删除每一行。出于某种原因，无论何时删除第一行，我都无法再添加新行。

这是HTML：

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='all'>
  <button class='add'>Add</button>
  <div class='row'>hi - <span class='del'>delete</span></div>
</div>

还有jQuery：

var row, add, rows;

$(document).ready(function(){  
  row = $('.row'); // problem? because it's not a clone?
  add = $('.add');
  rows = $('.row');
  add.on("click", function(){
    row.clone().appendTo($('#all')); // problem? because it's now gone?
    rows = $('.row');
    updateRows();
  });
});

function updateRows() {
  rows.on("click", ".del", function(){
    $(this).parent().fadeOut(1000, function(){
      $(this).remove();
    });
    rows = $('.row');
  });
}

如果有帮助，我也做了CodePen demo。所以我的问题是，为什么删除第一行后“添加”按钮停止工作？我想知道是否删除了第一行后就不能再添加它，因为随后删除了该变量，如果我是对的，那么如何创建一个即使在删除后仍保持不变的变量克隆（如果您知道我的意思的话））？

感谢您的帮助-非常感谢您的解释。

Answer 1

您可以复制该行的externalHTML，使其始终可用。使用$(".row").first().html()仅复制内部HTML（因此不包括class=row部分）。

这给您：

var row = $(".row").first().outerHTML(); // store first row
$('.add').on("click", function() {
  $("#all").append(row); 
});

复制来自https://stackoverflow.com/a/4180972/2181514

的外部HTML

在将事件委派用于del按钮时，只需调用一次即可，给出：

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

$(document).ready(function() {
  var row = $(".row").first().outerHTML(); // store first row
  $('.add').on("click", function() {
    $("#all").append(row);
  });

  $(document).on("click", ".row>.del", function() {
    $(this).closest(".row").fadeOut(1000, function() {
      $(this).remove();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='all'>
  <button class='add'>Add</button>
  <div class='row'>hi - <span class='del'>delete</span></div>
</div>

更新的代码笔：https://codepen.io/anon/pen/qLQqJm

Answer 2

如果删除唯一的行，则变量row内将没有任何内容，因此在调用row.clone()时会导致错误。您可以设置row =您要.clone()的行的html字符串，而可以将html作为行附加到div

var row, add, rows;

$(document).ready(function(){  
  row = '<div class="row">hi - <span class="del">delete</span</div>'; // changed to html string to append to div
  add = $('.add');
  rows = $('.row');
  add.on("click", function(){
    $('#all').append(row);
    rows = $('.row');
    updateRows();
  });
});

function updateRows() {
  rows.on("click", ".del", function(){
    $(this).parent().fadeOut(1000, function(){
      $(this).remove();
    });
    rows = $('.row');
  });
}

查看更新的代码笔：（https://codepen.io/anon/pen/NeEbbL）

删除元素后，简单的按钮功能停止

2 个答案: