web-dev-qa-db-fra.com

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: Bien fini d'utiliser juste l'option jQuery.

javascriptremoveclass
89
Brett

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

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

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

element.parentNode.removeChild(element);
152
Lior Cohen

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

En utilisant ES6 vous pourriez 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>
28
Roko C. Buljan

Sans jQuery, vous pourriez faire:

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

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

Brett - êtes-vous au courant que getElementyByClassName support de IE 5.5 à 8 = not there selon quirksmode ?. Vous feriez mieux de suivre ce modèle si vous vous souciez de la compatibilité entre navigateurs:

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

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émonstration rapide.

EDIT: Voici la version corrigée, spécifique à votre balise:

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 consiste à stocker une référence à chaque élément dans un tableau temporaire, puis à effectuer une boucle sur ceux-ci, en retirant chacun d'eux du DOM.

Essayez ici.

10
karim79

Ça marche pour moi

while (document.getElementsByClassName('my-class')[0]) {
        document.getElementsByClassName('my-class')[0].remove();
    }
8
Уляна Різник

Je préfère utiliser forEach plutôt que for/while en boucle. Pour utiliser, il faut convertir HTMLCollection en Array d'abord:

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

Faites attention, ce n'est pas nécessaire le moyen le plus efficace. Juste beaucoup plus élégant pour moi.

3
Alexander

Oui, vous devez supprimer du parent:

cur_columns[i].parentNode.removeChild(cur_columns[i]);
1
David Tang

Vous pouvez utiliser cette syntaxe: node.parentNode

Par exemple:

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

La fonction récursive pourrait 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();
1
Can PERK

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();
});
0
lchachurski
const elem= document.getElementsByClassName('column')

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

OR

const elem= document.getElementsByClassName('column')

while (elem.length > 0 )
    elem[0].remove();
0
Fatih Ertuğral