При работе с JavaScript и объектной моделью документа (DOM) могут возникнуть случаи, когда вам потребуется удалить определенный дочерний элемент из родительского элемента на основе его индекса. В этой статье мы рассмотрим различные методы решения этой задачи, приведя попутно примеры кода.

Метод 1: использование метода removeChild()
Самый простой подход — использовать метод removeChild(), доступный для родительского элемента. Вот пример:

const parentElement = document.getElementById('parent');
const childIndex = 2; // Index of the child element to be removed
const childToRemove = parentElement.children[childIndex];
parentElement.removeChild(childToRemove);

Метод 2: использование метода splice() для дочернего массива.
Другой способ удалить дочерний элемент по индексу — использовать метод splice()для childrenмассив родительского элемента:

const parentElement = document.getElementById('parent');
const childIndex = 2; // Index of the child element to be removed
parentElement.children.splice(childIndex, 1);

Метод 3: использование метода remove()
Если вы работаете с современными браузерами, вы можете воспользоваться методом remove(), доступным на узлах DOM:

const parentElement = document.getElementById('parent');
const childIndex = 2; // Index of the child element to be removed
parentElement.children[childIndex].remove();

Метод 4. Удаление дочернего элемента с помощью метода pop().
Если вы хотите удалить последний дочерний элемент, вы можете использовать метод pop()для childrenмассив:

const parentElement = document.getElementById('parent');
parentElement.children.pop();

Метод 5: скрытие дочернего элемента с помощью CSS
В некоторых случаях вы можете не захотеть навсегда удалять дочерний элемент, а просто скрыть его из поля зрения. Этого можно добиться, манипулируя свойством CSS display:

const parentElement = document.getElementById('parent');
const childIndex = 2; // Index of the child element to be hidden
parentElement.children[childIndex].style.display = 'none';

В этой статье мы рассмотрели несколько методов удаления дочернего элемента из родительского элемента в JavaScript. Если вам нужно полностью удалить элемент или временно скрыть его, эти методы предоставят вам различные варианты в соответствии с вашими конкретными требованиями. Не забудьте выбрать метод, который лучше всего соответствует вашим потребностям, и воспользуйтесь преимуществами доступных методов манипулирования DOM в JavaScript.