Como posso remover um nó filho em HTML usando JavaScript?

Question

Existe uma função como document.getElementById("FirstDiv").clear()?

Answer 1

Para responder à pergunta original – existem várias maneiras de fazer isso, mas a seguinte seria a mais simples.

Se você já possui um identificador para o nó filho que deseja remover, ou seja,você tem uma variável JavaScript que contém uma referência a ela:

myChildNode.parentNode.removeChild(myChildNode);

Obviamente, se você não estiver usando uma das inúmeras bibliotecas que já fazem isso, você gostaria de criar uma função para abstrair isso:

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

---

EDITAR:Como foi mencionado por outros:se você tiver algum manipulador de eventos conectado ao nó que está removendo, certifique-se de desconectá-los antes que a última referência ao nó que está sendo removido saia do escopo, para que implementações ruins do interpretador JavaScript vazem memória.

Answer 2

Se você quiser limpar a div e remover todos os nós filhos, você poderia colocar:

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

Answer 3

targetNode.remove()

Isso é recomendado pelo W3C no final de 2015 e é baunilha JS.Muito melhor/mais limpo que o método anterior.

Para o seu caso de uso:

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

Se você precisar de um polyfill para garantir compatibilidade com versões anteriores:

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

Documentos Mozilla

Navegadores Suportados - 92% março de 2018

Answer 4

Você deve remover todos os manipuladores de eventos definidos no nó antes de removê-lo, para evitar vazamentos de memória no IE

Answer 5

Uma solução 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();

Referências:

Seletor de Atributo Igual a [nome=valor]

Seleciona elementos que têm o atributo especificado com um valor exatamente igual a um determinado valor.

Seletor de filho (“pai > filho”)

Seleciona todos os elementos filho diretos especificado por "filho" de elementos especificado por "pai"

.remover()

Semelhante a .empty(), o .remove() método retira elementos do DOM.Usamos .remove() quando queremos remover o elemento em si, bem como tudo dentro dele.Além de os próprios elementos, todos ligados eventos e dados jQuery associados a os elementos são removidos.

Answer 6

Use o seguinte código:

//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 é o nó pai e c é o nó filho
parentNode é uma variável JavaScript que contém referência pai

Fácil de entender

Answer 8

Você deve poder usar o método .RemoveNode do nó ou o método .RemoveChild do nó pai.

Answer 9

Você provavelmente deveria usar uma biblioteca JavaScript para fazer coisas assim.

Por exemplo, MochiKit tem uma função removerElement, e jQuery tem remover.