Есть ли функция DOM, которая удаляет все элементы между двумя элементами?

Question

У меня есть двадцать три веб-компонента в элементе body, двадцать один из них находится между меню навигации (заголовком) и нижним колонтитулом. Есть ли функция, которая могла бы удалить все элементы между меню навигации и нижним колонтитулом?

Answer 1

Нет.

L oop над элементами и удаляйте их по одному.

const start = document.querySelector("nav");
const end = document.querySelector("footer");
while (start.nextElementSibling && start.nextElementSibling !== end) {
  start.nextElementSibling.remove();
}

<nav>Navigation</nav>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<footer>Footer</footer>

Answer 2

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

Вот аналогичный подход с использованием комбинатора «общих братьев и сестер» ~ и псевдокласса :not(). Поскольку мы получаем коллекцию, мы можем перебирать ее, выполняя .remove() для каждого элемента.

Если есть текстовые узлы, которые нужно удалить, это не обработает их.

Обратите внимание, что это будет go за пределами footer, если там есть какие-либо другие элементы, которые могут быть не тем, что вы хотите.

document.querySelectorAll("nav ~ :not(footer)")
  .forEach(el => el.remove());

<nav>Navigation</nav>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<footer>Footer</footer>