Question

我有一个包含代表产品的元素的div，其中包含 cart-item 类。

<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下所有具有类ol #insert-zone的div元素：

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
    });
});

如何从DOM中删除具有特定类名的所有元素？

3 个答案: