Supprimer des éléments par nom de classe ?

Question

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 pas comment les enlever... est-ce que je DOIS faire référence au parent ou quelque chose ? Quelle est la meilleure façon de gérer ça ?

@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 code 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>

Édition : Bien fini juste en utilisant l'option jQuery.

Answer 1

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

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

Answer 2

En utilisant jQuery (que vous pourriez vraiment utiliser dans ce cas, je pense), vous pourriez le faire de la façon suivante :

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

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

element.parentNode.removeChild(element);

Answer 3

En pur Javascript vanille, sans jQuery ou ES6, vous pourriez faire :

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

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

Answer 4

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());