從數組中刪除動態對象從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中刪除

回答

相關問題