Retire todos los elementos de una cierta clase con JavaScript

Question

HTML:

<p class="hi">dood</p> 
<p class="hi">dood</p> 
<p class="hi">dood</p> 
<p class="hi">dood</p> 
<p class="hi">dood</p> 
<p>not class 'hi'</p> 

JS que tengo hasta ahora:

var paras = document.getElementsByClassName('hi'); 

for(var i = 0; i < paras.length; i++) { 
    paras[i].style.color = '#ff0011'; 
    // $('.hi').remove(); 
}​ 

En jQuery, esto sería demasiado fácil. ($('.hi').remove();). Quiero aprender JS, y luego jQuery.

Estoy atrapado y Google no me ha proporcionado. No quiero convertirme en un programador jQuery de copiar/pegar. Estoy empezando a aprender JS. Gracias.

Answer 1

Para eliminar un elemento que hace esto:

el.parentNode.removeChild(el); 

MDN es una gran referencia. Aquí hay algunas páginas relevantes:

Node
parentNode
removeChild

Sin embargo se encontrará con problemas si se recorre así desde devuelve una lista en vivo, cuando se quita un nodo se quita el elemento de la lista también, por lo que no debe aumentar o terminará omitiendo todos los demás elementos. En lugar de ello basta con retirar continuamente el primer elemento de la lista, hasta que no haya primer elemento:

var paras = document.getElementsByClassName('hi'); 

while(paras[0]) { 
    paras[0].parentNode.removeChild(paras[0]); 
}​ 

---

OMI jQuery es muy bueno para mostrar lo que es posible hacer en Javascript. De hecho, te recomiendo que después de una semana o dos de JS simple aprendas jQuery, seas bueno en eso y recuerdes lo que está abstrayendo. Un día, cuando tenga una excelente comprensión del alcance del Javascript, de los objetos que pueda obtener mientras usa jQuery, regrese y trate de aprender a interactuar mejor con el DOM sin una biblioteca.De esta forma, le resultará más fácil aprender JS simple y apreciará la abstracción que las bibliotecas pueden proporcionarle aún más, al tiempo que descubre que cuando solo necesita una o dos cosas de una biblioteca, puede escribirlas usted mismo sin incluyendo toda la biblioteca.

Answer 2

Afaik solo un padre puede eliminar a un niño en JS nativo. Entonces primero tendrías que obtener los elementos padre, luego usar el padre para eliminar el elemento. Prueba esto:

var parent = paras[i].parentNode; 
parent.removeChild(paras[i]); 

Answer 3

[].forEach.call(document.querySelectorAll('.hi'),function(e){ 
    e.parentNode.removeChild(e); 
}); 

Aquí estoy usando Array.prototype.forEach para atravesar fácilmente todos los elementos de un objeto de matriz similar, es decir, el NodeList estática devuelto por querySelectorAll, y luego usando removeChild() para eliminar el elemento de la DOM.

Para los navegadores antiguos que no soportan querySelectorAll() o forEach():

var classMatcher = /(?:^|\s)hi(?:\s|$)/; 
var els = document.getElementsByTagName('*'); 
for (var i=els.length;i--;){ 
    if (classMatcher.test(els[i].className)){ 
    els[i].parentNode.removeChild(els[i]); 
    } 
} 

Tenga en cuenta que debido a getElementsByTagName devuelve un vivo NodeList, debe iterar sobre los elementos de atrás hacia adelante, mientras que la eliminación de ellos de el DOM.

También hay algunos navegadores más antiguos que no son compatibles con querySelectorAll pero que sí admiten getElementsByClassName, que puede usar para aumentar el rendimiento y reducir el código.