Как удалить все дочерние элементы DOM-узла в JavaScript?

Оффтоп javascript
1

Привет, народ! У меня возник вопрос по JavaScript. Как можно удалить все дочерние элементы определенного DOM-узла?

Допустим, у меня есть такая разметка:

<div id="container">
  <p>Первый параграф</p>
  <span>Какой-то текст</span>
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</div>

Я получаю нужный элемент:

var myElement = document.getElementById("container");

Как мне удалить все его содержимое, чтобы остался только пустой <div id="container"></div>?

Можно ли просто присвоить пустой массив, типа myElement.childNodes = [];? Или нужно использовать какие-то специальные методы вроде removeChild?

Буду благодарен за ответ на чистом JavaScript, без использования библиотек. Хотя если кто-то подскажет еще и вариант на jQuery - будет здорово!

2

Классный вопрос! я недавно как раз с этим столкнулся. Могу поделиться своим решением - использовал метод while для удаления. Выглядит примерно так: while (myElement.firstChild) { myElement.removeChild(myElement.firstChild); }. Работает отлично, хотя может быть чуть медленнее чем innerHTML. зато более явный подход и можно добавить доп логику если нужно. а еще есть вариант с replaceChildren() - совсем новый метод, но уже хорошо поддерживается. просто вызываешь myElement.replaceChildren() и готово!

3

Чувак, попробуй метод replaceChildren() - он как раз для этого и создан. Просто пишешь myElement.replaceChildren() и все дочерние элементы улетают. Работает быстро и красиво. Я на своем проекте недавно все старые removeChild заменил на него - код стал в разы чище. Единственный минус - в IE не поддерживается, но кому он сейчас нужен. А для совместимости можно проверку сделать и фоллбэк на innerHTML = ‘’.

4

Самый простой способ - использовать innerHTML. Просто сделай myElement.innerHTML = ‘’; и все содержимое исчезнет. Быстро и эффективно. А если хочешь по-старинке через removeChild, можно в цикле удалять firstChild, пока они есть. На jQuery тоже легко - $(‘#container’).empty(). Кстати, а зачем тебе удалять все? Может, динамически обновляешь контент?