Как удалить конкретные дочерние элементы HTML на JavaScript?

Question

[Sveklovoz]

Есть таблица на HTML:

<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
</tr>

Нужно удалить второй и третий дочерний элемент tr, т.е. конкретно в этом случае чтобы код стал таким:

<tr>
  <td>1</td>
  <td>4</td>
  <td>5</td>
</tr>

И так сразу же отображался в браузере после прогрузки страницы.

Как это сделать на чистом JS? Я пытаюсь так, но понятное дело, ничего не выходит:

function removal() {
var a = document.getElementsByTagName('tr');
a[1,2].remove();
};

document.addEventListener("DOMContentLoaded", removal);

или

function removal() {
return document.getElementsByTagName('tr')[1,2].remove();
};

document.addEventListener("DOMContentLoaded", removal);

Answer 1

[0xD34F]

О каких элементах идёт речь и кого из них (индексы) надо удалить:

const parent = document.querySelector('селектор элемента, из которого надо кого-то удалить');
const elements = parent.children;
const toRemove = [ 3, 1, 666, 2 ];

Удаляем:

toRemove
  .map(n => elements[n])
  .filter(Boolean)
  .forEach(n => n.remove());

// или

for (const n of toRemove.sort((a, b) => b - a)) {
  elements.item(n)?.replaceWith();
}

// или

parent.replaceChildren(...Array.prototype.filter.call(
  elements,
  ((index, _, i) => !index.has(i)).bind(null, new Set(toRemove))
));

// или

Array.prototype.reduceRight.call(
  elements,
  (_, n, i) => toRemove.includes(i) && parent.removeChild(n),
  null
);

// или

parent.innerHTML = Array
  .from(elements, n => n.outerHTML)
  .filter((_, i) => !~toRemove.indexOf(i))
  .join('');

// или

parent
  .querySelectorAll(toRemove.map(n => `:scope > :nth-child(${-~n})`))
  .forEach(n => n.outerHTML = '');

Comments

[Sveklovoz]

Как обойтись, если у элемента-родителя нету css-селектора?

[0xD34F]

Sveklovoz, давайте-ка уточним: нет, или вы не знаете, каким он должен быть? Как именно вы достучитесь до нужного элемента - это к делу не относится.

[Sveklovoz]

0xD34F, ваш код не работает.

https://jsfiddle.net/j80dmr7b/

[0xD34F]

Sveklovoz, врать нехорошо. Это не мой код. Нет у меня никаких getElementsByTagName (кстати, вы не знаете, что этот метод делает - разберитесь).

Всё работает.

[Алексей Ярков]

Sveklovoz, это у вас не работает ))
https://jsfiddle.net/yarkov_aleksei/k204pqsv/

[Sveklovoz]

Алексей Ярков, Спасибо, но почему код не работает без объявления?

<table>
</table>

[Алексей Ярков]

Sveklovoz, потому что без <table> он рендерится вот в это