И я беру нужный мне узел следующим образом:

Как я могу удалить дочерние элементы

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

, чтобы просто

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

я мог просто сделать: foo или я должен использовать некоторую комбинацию <p id="foo"></p>. Из-за причуд между различными браузерами выбор иногда заменяется вызвавшим его щелчком, и после этого он отменяет выбор содержимого в пользу размещения курсора внутри. текстовое поле (в большинстве случаев работало нормально в FF, но не было в IE)

, я бы хотел, чтобы ответ был прямым DOM ;, хотя дополнительные баллы, если вы также предоставляете ответ в jQuery вместе с ответом только для DOM.

myNode.childNodes = new Array();

Вариант 1 (намного медленнее, см. Комментарии ниже): removeElement?

Вариант 2 (намного быстрее):

В настоящее время принят неправильный ответ о том, что

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

медленнее (по крайней мере, в IE и Chrome), как m93a правильно сказано.

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

Chrome и FF значительно быстрее, используя этот метод (который уничтожит вложенные данные jquery): innerHTML в отдаленную секунду для FF и Chrome и быстрее всего в IE:

не уничтожит ваши обработчики событий или не прервет их jquery ссылается

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

, здесь также рекомендуется в качестве решения:

node.innerHTML = '';

перенаправление через сервлеты должно быть лучшим способом. но я все еще не могу найти правильный способ сделать это. Самый быстрый метод манипуляции DOM (все еще медленнее, чем предыдущие два) — это удаление Range, но диапазоны не поддерживаются до IE9., его также рекомендуется в качестве решения здесь: Лучший способ узнать, что страница на самом деле перезагружается, это использовать объект навигатор, который поддерживается большинством модов Ern браузеры. Глядя на вывод

Самый быстрый метод манипулирования DOM (все еще медленнее, чем предыдущие два) — это удаление Range, но диапазоны не поддерживаются до IE9.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

Другие упомянутые методы кажутся сопоставимыми, но намного медленнее, чем innerHTML, за исключением выброса jquery (1.1.1 и 3.1.1), который значительно медленнее, чем что-либо еще:

$(node).empty();

Доказательства здесь: { *} http://jsperf.com/innerhtml-vs-removechild/300

http://jsperf.com/innerhtml-vs-removechild/167 https://jsperf.com/remove-all-child-elements-of-a-dom-node-in-javascript (Новый URL для перезагрузки jsperf, потому что редактирование старого URL не работает) «Цикл за тест» Jsperf часто понимается как «за итерацию», и только у первой итерации есть узлы, которые нужно удалить, поэтому результаты бессмысленно, на момент публикации в этой теме были неправильно настроены тесты.

Если есть вероятность, что у вас есть потомки, затронутые jQuery, то вы

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

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

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

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

Но я хочу сделать что-то вроде этого: .empty() метод Если вы просто используете

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

Вот решение, которое я нахожу немного более читабельным — но для этого потребуется

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

Это более новый способ записи удаления узла в ES5. Это ванильный JS и читается

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);
const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

лучше, чем в предыдущих версиях. много — 94 % май 2019 г.

Большинство пользователей должны иметь современные браузеры, или вы можете перейти вниз, если это необходимо.

поддержку браузера Самый быстрый …

его ссылка на jsperf.com

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

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

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

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

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

Это как innerText, кроме стандартного. Он

element.textContent = '';

немного медленнее , но его проще использовать и он не будет сильно влиять на производительность, если у вас не будет слишком много материала для удаления. ”). В этих случаях глобальная переменная removeChild() Вот еще один подход:

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

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();
}

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

// @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 );

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

// @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 );

Есть несколько вариантов для достижения этой цели:

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

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

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

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

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

while (node.hasChildNodes()) {
  node.removeChild(node.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, его моментально!

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

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 — победитель!

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

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

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

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

Использование цикла range чувствует самое естественное для меня:

anyDom.empty()

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

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

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

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

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

целые числа используют это:

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 берет элемент и использует родительский узел, чтобы заменить себя копией без дочерних элементов. Небольшой выигрыш в производительности, если элемент редкий, но когда элемент имеет несколько узлов, выигрыш в производительности реализуется.

Другими способами в jQuery

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

просто только 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>!

Если вы хотите положить что-то обратно в это, 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 ="";

})

SHA-256

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