Elemente nach Klassennamen entfernen?

Ich habe den folgenden Code, um Elemente mit ihrem Klassennamen zu finden:

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

}

Ich weiß nur nicht, wie ich sie entfernen soll ..... MUSS ich auf die Eltern verweisen oder so? Was ist der beste Weg, um damit umzugehen?

@ Karim79:

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

Hier ist der 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>

Bearbeiten: Am Ende wurde nur die Option jQuery verwendet.

Mit jQuery (das Sie in diesem Fall wirklich verwenden könnten, denke ich) können Sie dies folgendermaßen tun:

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

Andernfalls müssen Sie das übergeordnete Element jedes Elements verwenden, um es zu entfernen:

element.parentNode.removeChild(element);

Wenn Sie JQuery nicht verwenden möchten:

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

Mit ES6 können Sie Folgendes tun:

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>

In reinem Javascript ohne jQuery oder ES6 können Sie Folgendes tun:

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

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

Das funktioniert bei mir

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

Brett - wissen Sie, dass die getElementyByClassNameUnterstützung von IE 5.5 bis 8 laut quirksmode nicht vorhanden ist ? Wenn Sie sich für die Cross-Browser-Kompatibilität interessieren, sollten Sie diesem Muster besser folgen:

• Containerelement nach ID abrufen.
• Erhalten Sie benötigte untergeordnete Elemente anhand des Tag-Namens.
• Iterieren Sie über untergeordnete Elemente und testen Sie, ob die className-Eigenschaft übereinstimmt.
• elements[i].parentNode.removeChild(elements[i]) wie die anderen sagten.

Kurzes Beispiel:

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

Hier ist eine kurze Demo.

BEARBEITEN: Hier ist die feste Version, die für Ihr Markup spezifisch ist:

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

Das Problem war meine Schuld; Wenn Sie ein Element aus dem resultierenden Array von Elementen entfernen, ändert sich die Länge, sodass bei jeder Iteration ein Element übersprungen wird. Die Lösung besteht darin, einen Verweis auf jedes Element in einem temporären Array zu speichern und diese anschließend zu durchlaufen und jedes Element aus dem DOM zu entfernen.

Probieren Sie es hier aus.

Ich bevorzuge forEachOver for/ whileLooping. Um es ist notwendig , zu verwenden , zu konvertieren , HTMLCollectionum Arrayzuerst:

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

Achten Sie darauf, es ist nicht unbedingt der effizienteste Weg. Einfach viel eleganter für mich.

Eine Linie

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

Auf dieser Seite können Sie beispielsweise Benutzerinformationen entfernen

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

Ja, Sie müssen vom übergeordneten Element entfernen:

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

Sie können diese Syntax verwenden: node.parentNode

Beispielsweise:

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

Die rekursive Funktion kann Ihr Problem wie unten beschrieben lösen

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

Wenn Sie Elemente entfernen möchten, die dynamisch hinzugefügt werden, versuchen Sie Folgendes:

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

ODER

const elem= document.getElementsByClassName('column')

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

Es ist sehr einfach, einzeilig, mit dem ES6-Spread-Operator aufgrund von document.getElementByClassName wird eine HTML-Sammlung zurückgegeben.

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

Die Fehler beim Überspringen von Elementen (Code von oben)

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

kann behoben werden, indem die Schleife wie folgt rückwärts ausgeführt wird (so dass das temporäre Array nicht benötigt wird)

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

Sie können eine einfache Lösung verwenden, ändern Sie einfach die Klasse, der HTML-Sammlungsfilter wird aktualisiert:

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

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

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