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

Question

Есть ли такая функция, как document.getElementById("FirstDiv").clear()?

Answer 1

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

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

myChildNode.parentNode.removeChild(myChildNode);

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

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

---

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

Answer 2

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

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

Answer 3

targetNode.remove ()

Это рекомендовано W3C на конец 2015 года и составляет vanilla JS . Гораздо лучше / чище, чем предыдущий метод.

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

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

Если вам нужен polyfill для обеспечения обратной совместимости:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

Документы Mozilla

Поддерживаемые браузеры - 92% март 2018

Answer 4

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

Answer 5

Решение 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();

Ссылки:

Селектор равных атрибутов [имя = значение]

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

Выбор ребенка («родитель> ребенок»)

Выбирает все прямые дочерние элементы определяется "дочерними" элементами указано родителем

.remove ()

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

Answer 6

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

//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.

Answer 7

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

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

Легко понять

Answer 8

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

Например, MochiKit имеет функцию removeElement , а jQuery имеет remove .

Answer 9

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