一旦动态对象从DOM中移除，就从数组中移除它们

Remove dynamic objects from array once they're removed from the DOM

本文关键字：数组 DOM 动态 对象      更新时间：2023-09-26

在示例中，我创建了一个按钮，用于向文档和数组添加一个新对象。单击每个对象将其从文档中删除。我怎样才能从数组中删除它呢?

小提琴在这里

<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>

要从数组中删除一个元素，您可以找到它，然后使用.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元素数组:

var boxes = $(".boxes");

或者，如果你真的想把它们放在DOM元素数组中:

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

这是常见的这些天不维护一个并行数组的元素在javascript中，你可以在任何时候从DOM动态检索，只要你需要他们。现在的cpu已经非常快了，用户触发的操作也会非常快，即使它是从使用DOM查询构建对象列表开始的。

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

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

这里有一个小提琴来演示…http://jsfiddle.net/qs55y/

在数组中搜索被单击框的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;
        }
    });
});

你可以做很多事情，最简单的是在数组上做一个线性搜索，然后创建一个新的数组。这不是最有效的方法。我想补充一句，您应该重新考虑创建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/

相关文章：