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

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 过滤器 此处 并执行以下操作：

$(".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();