Как удалить дочерний узел в HTML с помощью JavaScript?

Есть функция вроде document.getElementById("FirstDiv").clear()?

Ответов (9)

Решение

Чтобы ответить на исходный вопрос - есть разные способы сделать это, но самым простым будет следующий.

Если у вас уже есть дескриптор дочернего узла, который вы хотите удалить, то есть у вас есть переменная JavaScript, которая содержит ссылку на него:

myChildNode.parentNode.removeChild(myChildNode);

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

function removeElement(node) {
    node.parentNode.removeChild(node);
}

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

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

Вы должны иметь возможность использовать метод .RemoveNode узла или метод .RemoveChild родительского узла.

Если вы хотите очистить div и удалить все дочерние узлы, вы можете указать:

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Вам, вероятно, следует использовать библиотеку JavaScript, чтобы делать такие вещи.

Например, в MochiKit есть функция removeElement , а в jQuery - remove .

Современное решение - child.remove()

Для вашего варианта использования:

document.getElementById("FirstDiv").remove()

Это рекомендуется W3C с конца 2015 года и является ванильным JS . Все основные браузеры поддерживают его.

Документы Mozilla

Поддерживаемые браузеры - 96%, май 2020 г.

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p - родительский узел, а c - дочерний узел.
parentNode - это переменная JavaScript, которая содержит родительскую ссылку.

Легко понять.

Решение jQuery

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Javascript

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

Использованная литература:

Селектор атрибута равно [name = value]

Выбирает элементы, которые имеют указанный атрибут со значением, точно равным определенному значению.

Дочерний селектор («родительский> дочерний»)

Выбирает все прямые дочерние элементы, указанные «дочерним» из элементов, указанных «родительским».

.Удалить()

Подобно .empty (), метод .remove () извлекает элементы из DOM. Мы используем .remove (), когда хотим удалить сам элемент, а также все, что внутри него. Помимо самих элементов, удаляются все связанные события и данные jQuery, связанные с элементами.

Используйте следующий код:

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.