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

StackOverflow https://stackoverflow.com/questions/13763

  •  08-06-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

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

myChildNode.parentNode.removeChild(myChildNode);

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

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

Редактировать:Как уже упоминалось другими:если у вас есть какие-либо обработчики событий, подключенные к удаляемому узлу, вам нужно убедиться, что вы отключили их до того, как последняя ссылка на удаляемый узел выйдет за пределы области видимости, чтобы из-за плохой реализации интерпретатора JavaScript не произошла утечка памяти.

Другие советы

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

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

targetNode.remove()

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

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

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

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

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

Документы Mozilla

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

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

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

Ссылки:

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

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

Дочерний селектор (“родитель > потомок”)

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

.удалить()

Подобно .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.

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

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

Легко для понимания

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

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

Например, MochiKit имеет функцию Удалениеэлемент, и jQuery имеет удалить.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top