¿Eliminar elementos por nombre de clase?

Question

que tienen el código de abajo para encontrar los elementos con su nombre de clase:

// Get the element by their class name 
var cur_columns = document.getElementsByClassName('column'); 

// Now remove them 

for (var i = 0; i < cur_columns.length; i++) { 

} 

Simplemente no sé cómo eliminarlos ..... ¿Tengo que hacer referencia al padre o algo? ¿Cuál es la mejor manera de manejar esto?

@ Karim79:

Aquí está la JS:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div"); 
var len = col_wrapper.length; 

alert(len); 

for (var i = 0; i < len; i++) { 
    if (col_wrapper[i].className.toLowerCase() == "column") { 
     col_wrapper[i].parentNode.removeChild(col_wrapper[i]); 
    } 
} 

Aquí está el código HTML:

<div class="columns" id="columns"> 
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> 
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> 
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> 
    <div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div> 
    <div name="columnClear" class="contentClear" id="columnClear"></div> 
</div> 

Editar: Bueno terminó simplemente utilizando la opción de jQuery.

Answer 1

usando jQuery (que realmente podría estar utilizando en este caso, creo), usted puede hacer esto de esta manera:

$('.column').remove(); 

de lo contrario, usted va a necesitar usar el padre de cada elemento para eliminarlo:

element.parentNode.removeChild(element); 

Answer 2

sí, hay que eliminar de la matriz:

cur_columns[i].parentNode.removeChild(cur_columns[i]); 

Answer 3

se puede utilizar esta sintaxis: node.parentNode

Por ejemplo:

someNode = document.getElementById("someId"); 
someNode.parentNode.removeChild(someNode); 

Answer 4

Brett - ¿Sabe usted que getElementyByClassName apoyo de IE 5.5 a 8 se not there according to quirksmode?. Sería mejor seguir este patrón si le importa la compatibilidad entre navegadores:

• Obtiene elemento contenedor por ID.
• Obtenga los elementos secundarios necesarios por nombre de etiqueta.
• Iterar sobre los hijos, probar la coincidencia de la propiedad className.
• elements[i].parentNode.removeChild(elements[i]) como dijeron los demás.

Ejemplo rápido:

var cells = document.getElementById("myTable").getElementsByTagName("td"); 
var len = cells.length; 
for(var i = 0; i < len; i++) { 
    if(cells[i].className.toLowerCase() == "column") { 
     cells[i].parentNode.removeChild(cells[i]); 
    } 
} 

Here's a quick demo.

EDIT: Aquí está la versión fija, específica para el marcado:

var col_wrapper = document.getElementById("columns").getElementsByTagName("div"); 

var elementsToRemove = []; 
for (var i = 0; i < col_wrapper.length; i++) { 
    if (col_wrapper[i].className.toLowerCase() == "column") { 
     elementsToRemove.push(col_wrapper[i]); 
    } 
} 
for(var i = 0; i < elementsToRemove.length; i++) { 
    elementsToRemove[i].parentNode.removeChild(elementsToRemove[i]); 
} 

El problema fue mi culpa; cuando elimina un elemento de la matriz resultante de elementos, la longitud cambia, por lo que un elemento se omite en cada iteración. La solución es almacenar una referencia a cada elemento en una matriz temporal, y luego realizar un ciclo sobre esos, eliminando cada uno del DOM.

Try it here.

Answer 5

Si prefiere no utilizar JQuery:

function removeElementsByClass(className){ 
    var elements = document.getElementsByClassName(className); 
    while(elements.length > 0){ 
     elements[0].parentNode.removeChild(elements[0]); 
    } 
} 

Answer 6

Los elementos saltarse error en este (código de arriba)

var len = cells.length; 
for(var i = 0; i < len; i++) { 
    if(cells[i].className.toLowerCase() == "column") { 
     cells[i].parentNode.removeChild(cells[i]); 
    } 
} 

se puede solucionar simplemente ejecuta el bucle hacia atrás de la siguiente manera (para que la matriz temporal no sea necesaria)

var len = cells.length; 
for(var i = len-1; i >-1; i--) { 
    if(cells[i].className.toLowerCase() == "column") { 
     cells[i].parentNode.removeChild(cells[i]); 
    } 
} 

Answer 7

Usted puede usar una solución simple, basta con cambiar la clase, el filtro Colección HTML se actualiza:

var cur_columns = document.getElementsByClassName('column'); 

for (i in cur_columns) { 
    cur_columns[i].className = ''; 
} 

Ref: http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html

Answer 8

Sin jQuery, que podría hacer:

const elements = document.getElementsByClassName("my-class"); 

while (elements.length > 0) elements[0].remove(); 

Answer 9

Usando ES6 puede hacer como:

const removeElements = (elms) => [...elms].forEach(el => el.remove()); 
 

 
// Use like: 
 
removeElements(document.querySelectorAll(".remove"));

<p class="remove">REMOVE ME</p> 
 
<p>KEEP ME</p> 
 
<p class="remove">REMOVE ME</p>

Answer 10

En caso de que desea eliminar los elementos que se añaden dinámicamente intente esto:

document.body.addEventListener('DOMSubtreeModified', function(event) { 
    const elements = document.getElementsByClassName('your-class-name'); 
    while (elements.length > 0) elements[0].remove(); 
}); 

Answer 11

Yo prefiero usar forEach sobre for/while bucle. Con el fin de utilizarlo es necesario convertir a HTMLCollectionArray primera:

Array.from(document.getElementsByClassName("post-text")) 
    .forEach(element => element.remove()); 

Tener en cuenta, no es necesaria la forma más eficiente. Simplemente mucho más elegante para mí.