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

Question

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

Fiddle is here .

<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 元素数组:

var boxes = $(".boxes");

或者，如果您确实希望它们位于 DOM 元素数组中:

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

<小时/>

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