html - 按属性条件删除某些div

Question

我有这样的东西

<div data-count="5">Something</div>
<div data-count="10">Something</div>
<div data-count="15">Something</div>
<div data-count="20">Something</div>
<div data-count="25">Something</div>

如何删除“data-count”属性值小于 15 的 div？

Answer 1

这样效率更高，因为它只选择具有 data-count 属性的 div，并且只为每个元素构造一次 jQuery 对象:

$('div[data-count]').each(function () {
    var $this = $(this);

    if ($this.attr('data-count') < 15) {
        $this.remove();
    }
});

演示:

$('button').on('click', function () {
    $('div[data-count]').each(function () {
        var $this = $(this);

        if ($this.attr('data-count') < 15) {
            $this.remove();
        }
    });
});

div[data-count]:before {
    content: "<div data-count=\"" attr(data-count) "\">";
}

div[data-count]:after {
    content: "</div>";
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<button type="button">Remove data-count less than 15</button>
<div data-count="5">Something</div>
<div data-count="10">Something</div>
<div data-count="15">Something</div>
<div data-count="20">Something</div>
<div data-count="25">Something</div>

原生 JavaScript 的替代解决方案:

var divs = document.querySelectorAll('div[data-count]'),
    div, i;

for (i = 0; i < divs.length; i++) {
    div = divs[i];
    if (div.getAttribute('data-count') < 15) {
        // this will not affect iteration because querySelectorAll is a non-live NodeList
        div.parentNode.removeChild(div);
    }
}

演示:

var button = document.querySelector('button');

button.addEventListener('click', function () {
    var divs = document.querySelectorAll('div[data-count]'),
        div, i;

    for (i = 0; i < divs.length; i++) {
        div = divs[i];
        if (div.getAttribute('data-count') < 15) {
            // this will not affect iteration because querySelectorAll is a non-live NodeList
            div.parentNode.removeChild(div);
        }
    }
});

div[data-count]:before {
    content: "<div data-count=\"" attr(data-count) "\">";
}

div[data-count]:after {
    content: "</div>";
}

<button type="button">Remove data-count less than 15</button>
<div data-count="5">Something</div>
<div data-count="10">Something</div>
<div data-count="15">Something</div>
<div data-count="20">Something</div>
<div data-count="25">Something</div>