如何從DOM中刪除具有特定類名稱的所有元素？

Question

我有一個代表產品的元素，其中有購物車項目類。

<div id="cart"> 
    <h1 class="ui-widget-header">Demostration Site</h1> 

    <div class="ui-widget-content"> 
     <ol id="insert-zone" class="ui-droppable ui-sortable"> 
      <li class="placeholder" style="display: none;">Add your items here</li> 
      <div class="item-container cart-item"></div> 
      <div class="item-container cart-item"></div> 
      <div class="item-container cart-item"></div> 
      <div class="item-container cart-item"></div> 
      <div class="item-container cart-item"></div> 
      <div class="item-container cart-item"></div> 
      <div class="item-container cart-item"></div> 
     </ol> 
    </div> 
</div> 

我想有一個按鈕，在被擠壓，清除與類車項目的所有項目，以得到一個空的購物車。我怎樣才能做到這一點？

Answer 1

的jQuery：$('#insert-zone').empty();

或者，如果你不想徹底清理：$('.cart-item').remove();

你也需要一個按鈕。所以：

$('#button-id').on('click', function() { 
    $('.cart-item').remove(); 
}); 

Answer 2

這將刪除有cart-item類的所有div元素ol #insert-zone下：

var ol = document.getElementById('insert-zone'); 
var div = ol.getElementsByClassName('cart-item'); 

for(var i=0;i<div.length;i++) 
    ol.removeChild(div[i]); 

Answer 3

這是與jQuery

這裏很簡單的事就是我剛掀起了一個例子：http://jsfiddle.net/anUqB/

HTML：

<div id="cart"> 
    <div class="item-container cart-item">item</div> 
    <div class="item-container cart-item">item</div> 
    <div class="item-container cart-item">item</div> 
    <div class="item-container cart-item">item</div> 
    <div class="item-container cart-item">item</div> 
    <div class="item-container cart-item">item</div> 
</div> 
<button id="clear">Clear</button> 

Java腳本

$("#clear").click(function() { //When the button with id "clear" is pressed 
    $(".cart-item").each(function() { // Find an iterate through each item with class "cart-item" 
     $(this).remove(); // Remove the item 
    }); 
});