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

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

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

来源

2014-05-18 Tim C

看：[Array.prototype.slice]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice）和[Array.prototype .indexOf]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf） – Givi

在数组中找到DOM元素，使用.splice（）删除一个项目来自阵列。但是，有人可能会问为什么你甚至有数组，当你可以随时用DOM查询生成数组。 – jfriend00

如前所述，会更容易只需要创建一个新的数组@ jfriend00 ...

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

这里是展示小提琴.. http://jsfiddle.net/qs55y/

来源

2014-05-18 21:20:26 jsuna

OP代码中的'boxes'不是DOM对象或jQuery对象的数组。它是一个'Box'对象的数组，每个对象都有一个DOM对象。因此，你的建议与OP的代码没有做同样的事情。 – jfriend00

@ jfriend00 - 注意到 - 是的，他错过了他创造'盒子'实例的事实..你的回答更准确/正确 – jsuna

@jsuna - 是的，我最初也错过了。 OP的代码不太可读。 – jfriend00

要从中删除元素阵列，找到它然后用.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/

我建议你也许并不需要保持箱数组的第一个地方，你可以只产生在任何时候以需求DOM元素的数组这个在jQuery对象：

var boxes = $(".boxes");

，或者，如果你真的想他们的DOM元素的数组：

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

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

来源

2014-05-18 21:22:13 jfriend00

不能删除它我检查了控制台... –

所以你可以只发布一个正确的小提琴，这将是有益的 –

@susheel - 看起来你的代码是一个BOX对象的数组，而不是DOM元素的数组（你的代码不是很清晰地写入）。我会更新我的答案。 – jfriend00

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

来源

2014-05-18 21:32:00

搜索的点击框的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; 
     } 
    }); 
});

来源

2014-05-18 21:37:00 mathewbergt

另外，你可以通过调用'$（'＃p2'）.text（boxes）;'在每个循环之后更新视图中的对象列表......虽然我不确定为什么要列出这些摆在首位。 – mathewbergt

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

回答

相关问题