複数の要素がある場合、1つの要素のみを保持する方法

Question

ページを読み込むたびに、同じクラスと異なる（ランダム）IDの要素がランダムにあります。

私はそのクラスに応じて、ページ上に1つの要素しか残さず、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> 

Iは、（他の要素のID値のような）jokeはランダム/動的生成されるだけid="joke"を残したいです。

Answer 1

をお試しください：

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

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

Answer 2

あなたが最初のものだけを残しておきたい場合は、この

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

Answer 3

をあなたが最初のものにしたい場合は、することができます使用：

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

あなたはマッチしたものの中からランダムな要素が必要な場合は、:randomフィルタがhereを実装してください使用することができます。

Answer 4

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

JSFiddle

Answer 5

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

Answer 6

ランダムを表示します。要素：

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

Answer 7

ここでは、jQueryが利用可能であると回答したことに気付きました。明らかにjQueryは完璧な疑いがなく、大統領に選出されるべきですが、私はそれが利用できないと仮定しようとしています。 DOMを使用するだけで、これをやってみましょう（最初の要素を除くすべてを削除します）。

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

私たちは、要素（ないテキストノードやコメントノード）で最初のノードを探します。

<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（JSfiddleを参照してください）。私たちが1つを見つけることができなければ、私たちは何もしないほどスマートです。