在max到w / jQuery之后删除项目

时间:2011-10-26 21:26:34

标签: javascript jquery

好的,我正在尝试克隆包含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>

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

这是jfiddle I put as a demo

1 个答案:

答案 0 :(得分:2)

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

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

如果您想要除最后三个元素之外的所有元素,请使用.slice(0, length-3),如下面的代码所示。 小提琴: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);
});