Question

在小提琴中，我创建了一个按钮，为文档和数组添加新对象。单击每个对象将其从文档中删除。我怎样才能将它从数组中删除？

<button id="btn">addBox</button>
<p style="font-size: 12px">click boxes to remove</p>
<p id="p2" style="font-size: 12px"></p>

<script>
    $(document).ready(function() {
        boxes = []
        boxNumber = 0
        function Box() {
            this.output = $("<div />").addClass('box').attr('id', "box" + boxNumber++).appendTo("body");
            boxes.push(this);
        }

        function addBox() {
            var box = new Box();
            $('.box').each(function() {
                var boxID = $(this).attr('id');
                $(this).text(boxID);
            });
            $('#p2').text(boxes);
        }

        function removeBox() {
            $(this).remove();
        }

        $('body').on('click', '.box', function() {
            $(this).remove();
        });

        $('#btn').click(addBox);

    });
</script>

Answer 1

要从数组中删除元素，您会找到它，然后使用.splice()将其删除：

$('body').on('click', '.box', function() {
    $(this).remove();
    for (var i = 0; i < boxes.length; i++) {
        if (boxes[i].output[0] === this) {
            boxes.splice(i, 1);
            break;
        }
    }
});

工作jsFiddle：http://jsfiddle.net/jfriend00/hMcyd/

我建议您可能不需要首先保留box数组，因为您可以随时根据需要在jQuery对象中生成一个DOM元素数组：< / p>

var boxes = $(".boxes");

或者，如果你真的想要它们在DOM元素数组中：

var boxes = $(".boxes").toArray();

现在很常见的是，不要在javascript中维护一个并行的元素数组，只要你需要它们就可以随时从DOM动态检索它们。如今，用户触发操作的CPU速度非常快，即使它是通过构建带有DOM查询的对象列表开始的。

Answer 2

正如@jfriend00所提到的，创建新数组会更容易......

$('body').on('click', '.box', function() {
  $(this).remove();
  boxes = $('.box');
});

这是一个演示.. http://jsfiddle.net/qs55y/

的小提琴

Answer 3

你可以做很多事情，最简单的是对数组进行线性搜索，然后创建一个新数组。这不是最有效的方法。我可以补充一下，你应该重新考虑创建Box对象。

$('body').on('click', '.box', function() {
    var tmp = [];
    for(var i = 0; i < boxes.length; i++) {
      if(boxes[i].output[0] === this) break;
      tmp.push(boxes[i]);
    }
    boxes = tmp;
    $(this).remove();
});

http://jsfiddle.net/gSH4T/2/

Answer 4

在数组中搜索所单击框的id属性，并将该数组与该索引拼接在一起。

$('body').on('click', '.box', function() {
    var self = $(this);
    self.remove();
    $.each(boxes, function(index, value){
        if (this.output.attr('id') === self.attr('id')){
            boxes.splice(index, 1);
            return false;
        }
    });
});

从DOM中删除后，从数组中删除动态对象

4 个答案: