Elemente nach Klassennamen entfernen?

126

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.

Brett
quelle
4
Ehrlich gesagt ist der beste Weg, nur jQuery zu verwenden. Ich verstehe nicht wirklich, warum jemand die DOM-Manipulation nicht mehr von Hand durchführen möchte.
Tyler Eaves
7
Ich weiß nicht, lol ... Ich habe nur das Gefühl, dass ich mich schmutzig fühle, wenn ich Frameworks kenne und keine Kenntnisse darüber habe, wie ich Vanilla JS tatsächlich verwenden kann. Da ich keine RIESIGE JS-Person bin, versuche ich, mit Vanilla JS zu codieren, wenn ich es benutze, damit ich die Dinge nicht vergesse lol
Brett
20
Richtig. Wer um alles in der Welt möchte ein sachkundiger und vielseitiger Entwickler sein? Absurd!
user113716
1
Ein guter Ansatz, aber nur weil Sie jQuery verwenden, müssen Sie nicht aufgeben, zu verstehen, wie es funktioniert oder was das zugrunde liegende DOM bietet. Sie könnten wahrscheinlich Ihr Auto reparieren, wenn Sie wollten (The DOM), aber Ihr Mechaniker ist wahrscheinlich erfahrener darin (das jQuery-Team).
Lior Cohen
2
@Lior: Ja, mein Mechaniker muss mir nicht helfen, den Schlüssel zu drehen oder mein Fenster herunterzurollen. ; o)
user113716

Antworten:

188

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);
Lior Cohen
quelle
41
+0,75 für die Verwendung von jQuery, +0,25 für die Angabe einer Nicht-jQuery-Lösung: p
ThiefMaster
7
+0,01 für die Verwendung von jQuery, +0,99 für die Angabe einer Nicht-jQuery-Lösung: p
Alex Pyzhianov
183

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]);
    }
}
Veikko Karsikko
quelle
1
Eine überraschende Menge nicht funktionierender Lösungen da draußen. Das ist richtig. Vielen Dank!
Penguinsource
11
Wenn sich jemand fragt, warum er das erste Element (Index 0) immer entfernt, liegt dies daran, dass beim Entfernen eines Elements auch das elementsArray verkleinert wird.
Jefferson Lima
Was ist mit den anderen Indizes (akzeptieren Sie den 0-Index)?
ofir_aghai
1
@ofir_aghai als @JeffersonLima zeigt, dass getElementsByClassNamees sich um eine Live-Sammlung handelt. developer.mozilla.org/en-US/docs/Web/API/NodeList
Veikko Karsikko
2
Schöne Beobachtung über die Tatsache, dass Elemente Array schrumpft
Ferralucho
32

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>

Roko C. Buljan
quelle
Wie wäre es mit: var removeElements = (elms) => [... elms] .forEach (el => el.remove ());
Calculuswhiz
1
Beste Antwort Danke!
Francesco
25

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();
tocqueville
quelle
2
Klarste Antwort ohne jQuery und ES6
Eric
2
Vielleicht kam Ihre Antwort später - sollte die akzeptierte sein, da sie nicht von jQuery abhängig ist. Im Allgemeinen ist es besser, Vanille-js zu verwenden, nicht wahr?
Luckyfella
Beste Antwort ohne die unnötige und aufgeblähte jQuery. Sag NEIN zu jQuery. Ja zu Vanilleeis!
Thanasis
13

Das funktioniert bei mir

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

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.

karim79
quelle
Vielen Dank dafür - obwohl es kein großes Problem ist, da es sich um einen Admin-Bereich handelt, wird es wirklich von einer Person verwendet ... aber Ihre Kommentare werden trotzdem berücksichtigt.
Brett
@Brett - mach es trotzdem! Es wird ein paar Minuten Ihrer Zeit dauern und Sie werden extra High-Fives im Büro bekommen :)
karim79
Ok, ich habe es versucht ... es hat die richtige Anzahl von Elementen gemeldet, als ich eine Warnung ausgeführt habe, aber es wurden nur zwei der vier mit diesem Klassennamen entfernt und ich habe den folgenden Fehler erhalten: col_wrapper [i] ist undefiniert. Ich werde meinen Beitrag mit dem von mir verwendeten Code aktualisieren.
Brett
@Brett - Wenn Sie interessiert sind, habe ich Ihren aktualisierten Code repariert und das Problem kommentiert.
Karim79
Mann, das hat mir mehr geholfen, als Sie sich bei einem Problem vorstellen können, bei dem ich in den letzten zwei Stunden ratlos war. DANKE!
Zoolander
4

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.

Alexander
quelle
4

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());
Mohsen
quelle
1

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

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

Sie können diese Syntax verwenden: node.parentNode

Beispielsweise:

someNode = document.getElementById("someId");
someNode.parentNode.removeChild(someNode);
Computerisch
quelle
2
Diese Frage wurde gestellt, um von className
JoeTidee
1

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();
Kann PERK
quelle
1
Haha mied eine Schleife. <3
Ivan Ivković
0

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();
});
lchachurski
quelle
0
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();
Fatih Ertuğral
quelle
0

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());
Wolfgang Leon
quelle
-1

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]);
   }
}
shao.lo
quelle
Das ist etwas kompliziert. Warum nicht stattdessen einen while-Zyklus verwenden? (siehe meine Antwort)
Tocqueville
@tocqueville Die gepostete Frage verwendete eine for-Schleife. Ich habe lediglich darauf hingewiesen, wie der Fehler mit minimalen Änderungen an seinem Code behoben werden kann.
shao.lo
-3

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

Gustavo Ruiz
quelle
1
Dies funktioniert nicht, da das Array der Schleife innerhalb der Schleife selbst geändert wird. Das Ergebnis ist, dass das letzte Element übersprungen wird.
Tocqueville