Usunąć elementy według nazwy klasy?

Mam poniższy kod, aby znaleźć elementy z ich nazwą klasy:

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

}

Po prostu nie wiem, jak je usunąć ..... MUSZĘ odwołać się do rodzica czy coś? Jak najlepiej sobie z tym poradzić?

@ Karim79:

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

Oto kod 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>

Edycja: Cóż, po prostu skorzystałem z opcji jQuery.

Używając jQuery (którego naprawdę możesz użyć w tym przypadku, myślę), możesz zrobić to w następujący sposób:

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

W przeciwnym razie będziesz musiał użyć rodzica każdego elementu, aby go usunąć:

element.parentNode.removeChild(element);

Jeśli wolisz nie używać JQuery:

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

Korzystając z ES6, możesz:

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>

W czystym Javascript, bez jQuery lub ES6, możesz zrobić:

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

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

To działa dla mnie

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

Brett - czy wiesz, że zgodnie z quirksmode niegetElementyByClassName ma wsparcia od IE 5.5 do 8 ? Lepiej będzie postępować zgodnie z tym wzorcem, jeśli zależy Ci na kompatybilności z różnymi przeglądarkami:

• Pobierz element kontenera według identyfikatora.
• Uzyskaj potrzebne elementy podrzędne według nazwy tagu.
• Wykonaj iterację po elementach potomnych, sprawdź dopasowanie właściwości className.
• elements[i].parentNode.removeChild(elements[i]) jak mówili inni faceci.

Szybki przykład:

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

Oto krótkie demo.

EDYCJA: Oto poprawiona wersja, specyficzna dla Twojego znacznika:

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

Problem był moją winą; kiedy usuwasz element z wynikowej tablicy elementów, długość zmienia się, więc jeden element jest pomijany przy każdej iteracji. Rozwiązaniem jest przechowywanie odniesienia do każdego elementu w tymczasowej tablicy, a następnie pętla nad nimi, usuwając każdy z nich z DOM.

Spróbuj tutaj.

Wolę używać forEachover for/ whilelooping. Aby użyć, należy najpierw przekonwertować HTMLCollectionna Array:

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

Zwróć uwagę, nie jest to konieczny najbardziej efektywny sposób. Po prostu dużo bardziej eleganckie dla mnie.

Jedna linia

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

Na przykład możesz to zrobić na tej stronie, aby usunąć informacje o użytkowniku

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

Tak, musisz usunąć z rodzica:

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

Możesz użyć tej składni: node.parentNode

Na przykład:

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

Funkcja rekurencyjna może rozwiązać twój problem, jak poniżej

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

Jeśli chcesz usunąć elementy, które są dodawane dynamicznie, spróbuj tego:

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

LUB

const elem= document.getElementsByClassName('column')

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

Jest to bardzo proste, jednowierszowe, używając operatora rozszerzania ES6 due document.getElementByClassName zwraca kolekcję HTML.

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

Błąd pomijania elementów w tym (kod z góry)

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

można naprawić, po prostu wykonując pętlę wstecz w następujący sposób (aby tymczasowa tablica nie była potrzebna)

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

Możesz skorzystać z prostego rozwiązania, po prostu zmień klasę, zaktualizowany zostanie filtr HTML Collection:

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