Как сохранить только один элемент, если их более одного

Question

Каждый раз, когда я загружаю страницу, у меня есть случайное количество элементов с одним и тем же классом и разными (случайными) идентификаторами.

Я хотел бы знать, как я могу сохранить только один элемент на странице иудалить остальные из 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 (что касается значений идентификатора другого элемента) генерируется случайным образом / динамически .

Answer 1

Если вы хотите сохранить только первое:

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

Ссылка: .slice(), .remove()

Answer 2

Я заметил, что есть только ответы, которые предполагают, что 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 3

Если вы хотите первый, вы можете использовать:

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

Если вы хотите, чтобы случайный элемент из этих соответствий, вы могли бы использовать фильтр :random здесь иделать:

$(".hey:random");

Answer 4

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

JSFiddle

Answer 5

Для отображения случайного .hey элемента:

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

Answer 6

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

Answer 7

Попробуйте это

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