Búsqueda de sitios web

javascript - Eliminar elementos por nombre de clase

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++) {
      
}

¿Tengo que referirme al padre o algo así? ¿Cuál es la mejor manera de manejar esto?

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>

Respuesta #1

Si prefieres no usar JQuery:

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

Respuesta #2

Usando jQuery (que realmente podrías estar usando en este caso, creo), podrías hacer esto de la siguiente manera:

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

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

element.parentNode.removeChild(element);

Respuesta #3

Usa Element.remove()

Eliminar un solo elemento

document.querySelector("#remove").remove();

Eliminar múltiples elementos

document.querySelectorAll(".remove").forEach(el => el.remove());

Si quieres una función práctica y reutilizable:

const remove = (sel) => document.querySelectorAll(sel).forEach(el => el.remove());

// Use like:
remove(".remove");
remove("#remove-me");
<p class="remove">REMOVE ME</p>
<p>KEEP ME</p>
<p class="remove">REMOVE ME</p>
<p id="remove-me">REMOVE ME</p>

Respuesta #4

En Javascript puro, sin jQuery ni ES6, podrías hacer:

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

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

Respuesta #5

Una línea

document.querySelectorAll(".remove").forEach(el => el.remove());

Por ejemplo, puedes hacerlo en esta página para eliminar la información del usuario

document.querySelectorAll(".user-info").forEach(el => el.remove());

Respuesta #6

Esto funciona para mí

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

Respuesta #7

Brett, ¿eres consciente de que el soporte de getElementyByClassName en IE 5.5 a 8 no existe según quirksmode? Te convendría más seguir este patrón si te importa la compatibilidad entre navegadores:

  • Obtener el elemento contenedor por ID.
  • Obtén los elementos secundarios necesarios por nombre de etiqueta.
  • Itera sobre los hijos, prueba si tienen la propiedad className que coincida.
  • 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 corregida, específica para tu 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 se elimina un elemento del arreglo resultante de elementos, la longitud cambia, por lo que se omite un elemento en cada iteración. La solución es almacenar una referencia a cada elemento en un arreglo temporal, y luego recorrer esos elementos, eliminando cada uno del DOM.

Pruébalo aquí.

Artículos relacionados