Удалить элемент внутри блока на JS

Question

Всем привет! Суть задачи немного сложнее, чем указано в заголовке, попробую объяснить. Есть динамические блоки, которых может быть больше, может быть меньше. Как пример:

<div class="block">
  <p class="element">Элемент</p>
  <p class="element">Элемент</p>
  <p class="element">Элемент</p>
</div>
<div class="block">
  <p class="element">Элемент</p>
  <p class="element">Элемент</p>
  <p class="element">Элемент</p>
</div>
<div class="block">
  <p class="element">Элемент</p>
  <p class="element">Элемент</p>
  <p class="element">Элемент</p>
</div>

Нужно, сделать так: если это 1-й блок, то удаляем все элементы и оставляем только 1-й элемент. Если это 2-й блок, то удаляем все, кроме 2-го элемента и тд. Блоков может быть больше, может быть меньше. Но если 4 блока, то всегда будет 4 элемента, если 5 блоков, то 5 элементов. Помогите, прошу)

Answer 1

Если я правильно понял, можно так:

[...document.querySelectorAll('div.block')].forEach((block, index) => {
  const children = [...block.children];
  const saved = children[index];
  for (const child of children) {
    if (child !== saved) child.remove();
  }
});

<div class="block">
  <p class="element">Элемент 1.1</p>
  <p class="element">Элемент 1.2</p>
  <p class="element">Элемент 1.3</p>
</div>
<div class="block">
  <p class="element">Элемент 2.1</p>
  <p class="element">Элемент 2.2</p>
  <p class="element">Элемент 2.3</p>
</div>
<div class="block">
  <p class="element">Элемент 3.1</p>
  <p class="element">Элемент 3.2</p>
  <p class="element">Элемент 3.3</p>
</div>

Answer 2

Можно так:

const allBlock = document.querySelectorAll('.block');
allBlock.forEach( (block, index) => {
    const elements = block.querySelectorAll('p.element');
    elements.forEach( (el, idx) => {
        if( idx !== index ) el.remove();
    } );
} );

Только нужно быть внимательнее с совместимостью метод forEach для NodeList не поддерживается старыми браузерами. Если нужна совместимость лучше сделать по старинке:

var allBlock = Array.prototype.slice.call(document.querySelectorAll('.block'));
allBlock.forEach( (block, index) => {
    var elements =  Array.prototype.slice.call(block.querySelectorAll('p.element'));
    elements.forEach( (el, idx) => {
        if( idx !== index ) el.remove();
    } );
} );

БЛОГ НА HUSL

Удалить элемент внутри блока на JS

Ответы (2 шт):