¿Cómo puedo eliminar un nodo secundario en HTML usando JavaScript?

Question

¿Existe una función como document.getElementById("FirstDiv").clear()?

Answer 1

Para responder a la pregunta original - hay varias maneras de hacer esto, pero la siguiente sería el más simple

Si ya tiene un identificador para el nodo hijo que desea eliminar, es decir, tiene una variable de JavaScript que contiene una referencia a ella:

myChildNode.parentNode.removeChild(myChildNode); 

Obviamente, si usted no está utilizando una de las numerosas bibliotecas que ya hacen esto, usted quiere crear una función para abstraer esto:

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

---

EDIT: Como se ha mencionado por otros: si tiene cualquier controlador de eventos cableado al nodo que está eliminando, querrá asegurarse de desconectarlos antes de que la última referencia al nodo que se está eliminando quede fuera del alcance, para que las implementaciones deficientes del intérprete de JavaScript no tengan memoria.

Answer 2

Debería poder utilizar el método .RemoveNode del nodo o el método .RemoveChild del nodo primario.

Answer 3

Si desea borrar el div y quitar todos los nodos secundarios, se puede poner:

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

Answer 4

probablemente debería utilizar una biblioteca JavaScript para hacer cosas como esta.

Por ejemplo, MochiKit tiene una función removeElement, y jQuery tiene remove.

Answer 5

usted tiene que quitar cualquier controlador de eventos que se ha fijado en el nodo antes de retirarla, para evitar pérdidas de memoria en el IE

Answer 6

Una solución 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(); 

Referencias:

Attribute Equals Selector [name=value]

Selecciona elementos que tienen el atributo especificado con un valor exactamente igual a un cierto valor.

Child Selector (“parent > child”)

Selecciona todos los elementos secundarios directos especificado por "niño" de elementos especificado por "padre"

.remove()

similares a .empty (), el .remove() método toma elementos del DOM. Usamos .remove() cuando queremos eliminar el elemento en sí, así como todo dentro de él. Además de los elementos en sí mismos, todos los eventos vinculados y los datos jQuery asociados con los elementos se eliminan.

Answer 7

utilizar el siguiente 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 8

targetNode.remove()

Esto es recomendado por el W3C en los últimos tiempos 2015, y es vainilla JS. Mucho mejor/más limpio que el método anterior.

Por su caso de uso:

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

Si necesita un polyfill para asegurar la compatibilidad hacia atrás:

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

Answer 9

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

p es nodo padre y C es nodo hijo
parentNode es una Variable de JavaScript que contiene la referencia principal

Fácil de entender