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

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

17.08.2008 17:48:04
node.remove();это современный способ сделать это. document.getElementById("FirstDiv").remove();для вашего случая использования
Gibolt 11.11.2016 08:21:28
9 ОТВЕТОВ
РЕШЕНИЕ

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

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

myChildNode.parentNode.removeChild(myChildNode);

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

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

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

99
16.09.2008 05:56:33
По "плохим реализациям". Вы имеете в виду IE6, IE7, IE8 или что-то еще? (в частности, не теряют ли хорошие браузеры память? В настоящее время меня больше не волнует IE 6-7.)
Camilo Martin 13.09.2012 22:00:58
@CamiloMartin - не уверен в специфике в наши дни, но, насколько я помню, «хорошие» браузеры должны следить за такими вещами и справляться с ними. YMMV
Jason Bunting 23.09.2012 06:33:25

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

0
17.08.2008 17:54:01

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

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}
46
12.03.2017 03:38:41

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

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

0
17.08.2008 17:58:55

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

3
17.08.2008 18:03:46

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

Ссылки:

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

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

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

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

.удалять()

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

3
2.08.2010 14:02:40

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

//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.
2
31.08.2015 17:07:15

targetNode.remove ()

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

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

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

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

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

Mozilla Docs

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

9
17.03.2018 19:27:52
    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

р родительский узел и с является дочерним узлом
ParentNode является переменной JavaScript , который содержит родительский ссылочный

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

1
22.06.2017 11:51:43