javascript - 使用 jQuery 达到最大值后删除项目

Question

好的，我正在尝试克隆包含 3 个元素的表。在制作 3 个克隆后，我需要继续克隆但删除项目 .val3。

$('a').click(function(e) {
    var $table = $(this).prev();
    $table.after($table.clone());
    e.preventDefault();

    var n = $(".val3").length;

    if (n > 3) {
        if (!$(".val3").hasClass("max3")) {
            $(".val3").remove();
        }
    } else {
        $(".val3").addClass("max3");
    }
});

<table border="1"> 
<tr> 
  <td>
  <div class="val1">val 1</div>
  <div class="val2">val 2</div>
  <div class="val3">val 3</div>
  </td> 
</tr> 
</table>
<a href="#">copy</a>

我决定在前 3 个类中添加一个类，然后检查该类是否不存在，然后删除该 div。我想我迷失在自己的逻辑中......

这是jfiddle I put as a demo .

Answer 1

使用 .splice 方法删除除前三个元素之外的所有 .val3 元素。

$('a').click(function(e) {
    var $table = $(this).prev();
    $table.after($table.clone());
    e.preventDefault();
    $('.val3').slice(3).remove()
});

如果您想要除最后三个元素之外的所有元素，请使用 .slice(0, length-3)，如下面的代码所示。 fiddle :http://jsfiddle.net/uR7Aw/1/

$('a').click(function(e) {
    var $table = $(this).prev();
    $table.after($table.clone());
    e.preventDefault();
    var length = $('.val3').length;
    if(length >= 3) $('.val3').slice(0, length - 3).remove();
});

编辑

您还可以在已存在 3 行以上时阻止添加更多 .val3 行，而不是在追加后删除该行:

$('a').click(function(e) {
    e.preventDefault();
    var $table = $(this).prev();
    var $clone = $table.clone();

    var length = $('.val3').length;
    if(length >= 3) $('.val3', $clone).remove();
    //Equivalent to $clone.find('.val3').remove();

    $table.after($clone);
});