Question

每次加载页面时，我都会有一个随机数量的具有相同类和不同（随机）ID的元素。

我想知道如何在页面上只保留一个元素并根据他们的类从DOM中删除其他元素？

示例：

<div id="joke" class="hey"></div>
<div id="joking" class="hey"></div>
<div id="jokes" class="hey"></div>
<div id="joker" class="hey"></div>

我只想留下id="joke" joke（其他元素的id值）随机/动态生成。

Answer 1

如果您只想保留第一个：

$('.hey').slice(1).remove();

参考： .slice()，.remove()

Answer 2

如果你想要第一个，你可以使用：

$(".hey").first();

如果您想要匹配的随机元素，可以使用:random过滤器实现here并执行：

$(".hey:random");

Answer 3

我注意到这里只有答案假设jQuery可用。虽然显然jQuery毫无疑问是完美的，应该当选总统，我会假设它不可用。让我们这样做（删除除第一个元素之外的所有元素）只需使用DOM即可。（见JSfiddle）

<div id="foo">
    <!-- a jocular comment -->
    <div id="joke" class="hey">1</div>
    <div id="joking" class="hey">2</div>
    <div id="jokes" class="hey">3</div>
    <div id="joker" class="hey">4</div>
</div>

JS：

var parent = document.getElementById('foo'),
    elems = parent.childNodes, // live list
    firstElemNode,
    i = 0;

while (elems[i] && elems[i].nodeType != 1) {
    i++;
}

if (elems[i]) {
   firstElemNode = parent.removeChild(elems[i]);
   parent.innerHTML = '';
   parent.appendChild(firstElemNode);
}

我们寻找作为元素的第一个节点（不是文本节点或注释节点）。如果我们找不到一个我们足够聪明，什么也不做。

Answer 4

var $els = $('.hey');
$els.not($els.eq(Math.floor(Math.random()*$els.length))).remove();

JSFiddle

Answer 5

试试这个

$('.hey').not('#joke').remove()

Answer 6

$('div.hey:not(:first)').remove()

Answer 7

显示随机 .hey元素：

$('.hey').hide();
$('.hey')[Math.floor(Math.random()*$('.hey').length)].show();

如果有多个元素，如何只保留一个元素

7 个答案: