Supprimer des éléments par nom de classe?

J'ai le code ci-dessous pour trouver des éléments avec leur nom de classe:

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

}

Je ne sais tout simplement pas comment les supprimer ... Dois-je faire référence au parent ou à quelque chose? Quelle est la meilleure façon de gérer cela?

@ Karim79:

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

Voici le 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>

Edit: Eh bien, j'ai simplement utilisé l'option jQuery.

En utilisant jQuery (que vous pourriez vraiment utiliser dans ce cas, je pense), vous pouvez le faire comme suit:

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

Sinon, vous devrez utiliser le parent de chaque élément pour le supprimer:

element.parentNode.removeChild(element);

Si vous préférez ne pas utiliser JQuery:

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

En utilisant ES6, vous pouvez faire comme:

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>

En Javascript pur, sans jQuery ou ES6, vous pouvez faire:

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

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

Cela fonctionne pour moi

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

Brett - savez-vous que le getElementyByClassNamesupport d'IE 5.5 à 8 n'est pas là selon quirksmode ?. Vous feriez mieux de suivre ce modèle si vous vous souciez de la compatibilité entre navigateurs:

• Obtenez l'élément de conteneur par ID.
• Obtenez les éléments enfants nécessaires par nom de balise.
• Itérer sur les enfants, tester la propriété className correspondante.
• elements[i].parentNode.removeChild(elements[i]) comme les autres gars l'ont dit.

Exemple rapide:

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

Voici une démo rapide.

EDIT: Voici la version fixe, spécifique à votre balisage:

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

Le problème était de ma faute; lorsque vous supprimez un élément du tableau d'éléments résultant, la longueur change, de sorte qu'un élément est ignoré à chaque itération. La solution est de stocker une référence à chaque élément dans un tableau temporaire, puis de boucler sur ceux-ci, en supprimant chacun d'eux du DOM.

Essayez-le ici.

Je préfère utiliser forEachover for/ whilelooping. Pour l'utiliser, il est nécessaire de convertir HTMLCollectionen Arraypremier:

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

Faites attention, ce n'est pas nécessaire de la manière la plus efficace. Juste beaucoup plus élégant pour moi.

Une ligne

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

Par exemple, vous pouvez faire dans cette page pour supprimer userinfo

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

Oui, vous devez retirer du parent:

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

Vous pouvez utiliser cette syntaxe: node.parentNode

Par exemple:

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

La fonction récursive peut résoudre votre problème comme ci-dessous

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

Si vous souhaitez supprimer des éléments ajoutés dynamiquement, essayez ceci:

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

const elem= document.getElementsByClassName('column')

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

OU

const elem= document.getElementsByClassName('column')

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

C'est très simple, en une seule ligne, en utilisant l'opérateur de propagation ES6 car document.getElementByClassName renvoie une collection HTML.

[...document.getElementsByClassName('dz-preview')].map(thumb => thumb.remove());

Le bug des éléments sautés dans ceci (code d'en haut)

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

peut être corrigé en exécutant simplement la boucle à l'envers comme suit (pour que le tableau temporaire ne soit pas nécessaire)

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

Vous pouvez utiliser une solution simple, changez simplement la classe, le filtre de la collection HTML est mis à jour:

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

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

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