¿Eliminar elementos por nombre de clase?

Question

Tengo el siguiente código para encontrar 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 así? ¿Cuál es la mejor manera de manejar esto?

@Karim79:

Aquí está el 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 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: Bien terminó usando la opción jQuery.

Answer 1

Usando jQuery (que realmente podría estar usando en este caso, creo), podría hacerlo así:

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

De lo contrario, necesitará usar el padre de cada elemento para eliminarlo:

element.parentNode.removeChild(element);

Answer 2

Si prefiere no usar jQuery:

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

Answer 3

Usando ES6 Podrías 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 4

Sin jQuery, podrías hacer:

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

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

Answer 5

Brett - ¿Eres consciente de que getElementyByClassName El apoyo de IE 5.5 a 8 es no ahí Según QuirksMode? Será mejor que siga este patrón si le importa la compatibilidad de los navegadores cruzados:

• Obtenga elemento contenedor por ID.
• Obtenga elementos infantiles necesarios por nombre de la etiqueta.
• Iterar sobre los niños, prueba para que coincida con la propiedad de nombre de clase.
• elements[i].parentNode.removeChild(elements[i]) Como dijeron los otros chicos.

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]);
    }
}

Aquí hay una demostración rápida.

Editar: Aquí está la versión fija, específica de su 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, luego luego se enrolla sobre ellos, eliminando cada uno del DOM.

Pruébalo aquí.

Answer 6

Esto funciona para mi

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }

Answer 7

Prefiero usar forEach sobre for/while bucle. Para usar, es necesario convertir HTMLCollection a Array primero:

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

Presta atención, no es necesario de la manera más eficiente. Mucho más elegante para mí.

Answer 8

Sí, debe eliminar del padre:

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

Answer 9

Puedes usar esta sintaxis: node.parentNode

Por ejemplo:

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

Answer 10

La función recursiva podría resolver su problema como a continuación

removeAllByClassName = function (className) {
    function findToRemove() {
        var sets = document.getElementsByClassName(className);
        if (sets.length > 0) {
            sets[0].remove();
            findToRemove();
        }
    }
    findToRemove();
};
//
removeAllByClassName();

Answer 11

En caso de que desee eliminar elementos que se agregan dinámicamente, pruebe esto:

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

Answer 12

const elem= document.getElementsByClassName('column')

for (let i = elem.length; 0 < i ; )
    elem[--i].remove();

O

const elem= document.getElementsByClassName('column')

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

Answer 13

El error de los elementos de omisión 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 ejecutando el bucle hacia atrás de la siguiente manera (para que no sea necesaria la matriz temporal)

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 14

Puede usar una solución simple, simplemente cambie la clase, se actualiza el filtro de colección HTML:

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

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

Árbitro: http://www.w3.org/tr/2011/wd-html5-author-20110705/common-dominterfaces.html