Используйте современный Javascript с remove!

const parent = document.getElementById("foo")
while (parent.firstChild) {
    parent.firstChild.remove()
}

Это новый способ записи удаления узла в ES5. Это ванильный JS, и он намного лучше читается, чем полагаться на родительский.

Поддерживаются все современные браузеры.

Поддержка браузера - 97% июнь '21

Обновление 2020 - используйте replaceChildren() API!

Заменить всех потомков теперь можно с помощью (поддерживается кроссбраузерность) replaceChildren () API:

container.replaceChildren(...arrayOfNewChildren);

При этом будут выполнены и а) все существующие дочерние элементы, и б) добавление всех заданных новых дочерних элементов за одну операцию.

Вы также можете использовать тот же API, чтобы просто удалить существующие дочерние элементы, не заменяя их:

container.replaceChildren();

Это полностью поддерживается в Chrome / Edge 86+, Firefox 78+ и Safari 14+. (Обратите внимание, что данные MDN в настоящее время неверны для Safari.) Это полностью определенное поведение. Скорее всего, это будет быстрее, чем любой другой предложенный здесь метод, поскольку удаление старых дочерних элементов и добавление новых выполняется а) без необходимости innerHTML, и б) за один шаг, а не за несколько.

var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

Если есть вероятность, что у вас есть потомки, затронутые jQuery, вы должны использовать какой-нибудь метод, который очистит данные jQuery.

$('#foo').empty();

Метод jQuery .empty() гарантирует, что все данные, связанные с jQuery с удаляемыми элементами, будут очищены.

Если вы просто используете DOM методы удаления потомков, эти данные останутся.

Если вы используете jQuery:

$('#foo').empty();

Если вы этого не сделаете:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

Самый быстрый...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Спасибо Андрею Лушникову за ссылку на jsperf.com (классный сайт!).

РЕДАКТИРОВАТЬ: чтобы было ясно, в Chrome нет разницы в производительности между firstChild и lastChild. Верхний ответ показывает хорошее решение для производительности.

elm.replaceChildren()

Это экспериментально без широкой поддержки, но при выполнении без параметров будет делать то, что вы просите, и это более эффективно, чем цикл по каждому дочернему элементу и его удаление. Как уже упоминалось, замена innerHTML пустой строкой потребует синтаксического анализа HTML со стороны браузера.

Документация здесь.

Если вы хотите иметь только узел без его дочерних элементов, вы также можете сделать его копию следующим образом:

var dupNode = document.getElementById("foo").cloneNode(false);

Зависит от того, чего вы пытаетесь достичь.

Вот еще один подход:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

element.textContent = '';

Это как innerText, кроме стандартного. Он немного медленнее, чем removeChild(), но его проще в использовании и не сильно повлияет на производительность, если вы этого не сделаете. У меня слишком много вещей, которые нужно удалить.

Вот что я обычно делаю:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

И вуаля, позже вы можете очистить любой элемент dom с помощью:

anyDom.empty()

Ecma6 делает его простым и компактным

myNode.querySelectorAll('*').forEach( n => n.remove() );

Это дает ответ на вопрос и удаляет все дочерние узлы.

Если есть текстовые узлы, принадлежащие myNode, их нельзя выбрать с помощью селекторов CSS, в этом случае мы должны применить (также):

myNode.textContent = '';

Фактически последний вариант может быть самым быстрым и более эффективным / действенным решением.

.textContent более эффективен, чем .innerText и .innerHTML, см. MDN

В ответ на DanMan, Maarten и Matt. Клонирование узла для установки текста - действительно эффективный способ достижения моих результатов.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

Также это работает для узлов не в dom, которые возвращают null при попытке доступа к parentNode. Кроме того, если вам нужно быть в безопасности, узел пуст перед добавлением содержимого, это действительно полезно. Рассмотрим пример использования ниже.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

Я считаю этот метод очень полезным при замене строки внутри элемента, если вы не уверены, что будет содержать узел, вместо того, чтобы беспокоиться о том, как навести порядок, начните с нуля.

Мне кажется наиболее естественным использование цикла диапазона:

for (var child of node.childNodes) {
    child.remove();
}

По моим измерениям в Chrome и Firefox, он примерно в 1,3 раза медленнее. В обычных обстоятельствах это, возможно, не имеет значения.

Для этого есть несколько вариантов:

Самый быстрый ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Альтернативы (медленнее):

while (node.firstChild) {
  node.removeChild(node.firstChild);
}

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Тест с предложенными параметрами

var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

Это удалит все узлы в элементе.

innerText - победитель! http://jsperf.com/innerhtml-vs-removechild/133. Во всех предыдущих тестах внутренний dom родительского узла удалялся на первой итерации, а затем применялся innerHTML или removeChild к пустому div.

Самый простой способ удалить дочерние узлы узла через Javascript

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

я видел, как люди делали:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

тогда кто-то сказал, что использовать el.lastNode быстрее

однако я думаю, что это самый быстрый:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

что ты думаешь?

ps: эта тема мне спасла жизнь. мой аддон firefox был отклонен, потому что я использовал innerHTML. Это давно стало привычкой. тогда я нашел это. и я действительно заметил разницу в скорости. при загрузке innerhtml потребовалось некоторое время для обновления, однако, добавив addElement, это произошло мгновенно!

Как правило, JavaScript использует массивы для ссылки на списки узлов DOM. Итак, это будет хорошо работать, если вы заинтересованы в том, чтобы сделать это через массив HTMLElements. Также стоит отметить, что поскольку я использую ссылку на массив вместо прото JavaScript, это должно работать в любом браузере, включая IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

Почему мы не следуем простейшему методу «удалить» зацикленный внутри while.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}

• Выбор родительского div
• Использование метода remove внутри цикла While для удаления первого дочернего элемента до тех пор, пока не останется ни одного.

Просто увидел, как кто-то упомянул этот вопрос в другом, и подумал, что добавлю метод, которого еще не видел:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

Функция clear берет элемент и использует родительский узел для замены себя копией без его дочерних элементов. Небольшой выигрыш в производительности, если элемент является разреженным, но когда у элемента есть группа узлов, выигрыш в производительности достигается.

Функциональный подход:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

«childNodes» в domChildren предоставит nodeList непосредственных дочерних элементов, который будет пустым, если ни один из них не найден. Чтобы отобразить nodeList, domChildren преобразует его в массив. domEmpty отображает функцию domRemove на все элементы, которые ее удаляют.

Пример использования:

domEmpty(document.body)

удаляет всех дочерних элементов из элемента body.

Вы можете удалить все дочерние элементы из контейнера, как показано ниже:

function emptyDom(selector){
 const elem = document.querySelector(selector);
 if(elem) elem.innerHTML = "";
}

Теперь вы можете вызвать функцию и передать селектор, как показано ниже:

Если элемент имеет id = foo

emptyDom('#foo');

Если элемент имеет class = foo

emptyDom('.foo');

если у элемента есть tag = ‹div›

emptyDom('div')

element.innerHTML = "" (или .textContent) - безусловно самое быстрое решение

Большинство ответов здесь основаны на ошибочных тестах.

Например: https://jsperf.com/innerhtml-vs-removechild/15.
Этот тест не добавляет новых дочерних элементов к элементу между каждой итерацией. Первая итерация удалит содержимое элемента, а каждая вторая итерация ничего не сделает. В этом случае while (box.lastChild) box.removeChild(box.lastChild) был быстрее, потому что box.lastChild был null в 99% случаев

Вот подходящий тест: https://jsperf.com/innerhtml-conspiracy

Наконец, не используйте node.parentNode.replaceChild(node.cloneNode(false), node). Это заменит узел своей копией без его дочерних элементов. Однако это не сохраняет прослушиватели событий и прерывает любые другие ссылки на узел.

Если вы хотите очистить родительский элемент DOM целиком, это очень просто ...

Просто используйте .empty()

function removeAll() {
  $('#parent').empty();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="removeAll()">Remove all the element of parent</button>
<div id="parent">
  <h3>Title</h3>
  <p>Child 1</p>
  <p>Child 2</p>
  <p>Child 3</p>
</div>

просто только IE:

parentElement.removeNode(true);

true - означает глубокое удаление - это означает, что все дочерние элементы также удаляются

Самый простой способ:

let container = document.getElementById("containerId");
container.innerHTML = "";

простое и быстрое использование цикла for !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

это не будет работать в теге <span>!

Другие способы в jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

Если вы хотите что-то вернуть в этот div, innerHTML, вероятно, лучше.

Мой пример:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

Если я использую метод .firstChild или .lastChild, функция displayHTML() не будет работать после этого, но никаких проблем с методом .innerHTML.

Это чистый javascript, я не использую jQuery, но работает во всех браузерах, даже в IE, и это очень просто для понимания.

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

с jQuery:

$("#foo").find("*").remove();