javascript - obtener - ¿Cómo eliminar los elementos que fueron recuperados usando querySelectorAll?

queryselector vs getelementbyid

Question

Su parece algo que tendría una respuesta rápida, pero no puedo encontrar una. Tal vez estoy buscando los términos equivocados? No hay bibliotecas, por favor, aunque no necesito alternativas de navegador cruzado, estoy apuntando a las últimas versiones de este proyecto.

Estoy recibiendo algunos elementos:

element = document.querySelectorAll(".someselector");

YEY!

¿Cómo elimino estos elementos? ¿Qué me estoy perdiendo? ¿Tengo que recorrerlos y hacer element.parentNode.removeChild(element); cosa, o hay una función simple que me falta?

Answer 1

Dado que NodeList ya es compatible con forEach , solo puede utilizar

document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));

<div>
  <span class="someselector">1</span>
  <span class="someselector">2</span>
  Should be empty
</div>

Consulte NodeList.prototype.forEach() . Solo tenga en cuenta que Internet Explorer no es compatible.

Edición : soporte de Internet Explorer. Si también desea que el código anterior funcione en IE, simplemente agregue este fragmento de código en cualquier lugar antes de su JS:

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

NodeList en IE de repente también soportará forEach .

Answer 2

Sí, casi tienes razón. .querySelectorAll devuelve una NodeList congelada . Necesitas iterarlo y hacer cosas.

Array.prototype.forEach.call( element, function( node ) {
    node.parentNode.removeChild( node );
});

Incluso si solo obtuvieras un resultado, necesitarías acceder a él a través del índice, como

elements[0].parentNode.removeChild(elements[0]);

Si solo desea consultar un elemento, use .querySelector en .querySelector lugar. Ahí solo obtiene la referencia de nodo sin la necesidad de acceder con un índice.