Usuwanie elementów według nazwy klasy?

Question

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

} 

ja po prostu nie wiem, jak je usunąć ..... muszę odwołać się do rodzica lub coś? Jaki jest najlepszy sposób, aby 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 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: Dobrze skończyło się tylko za pomocą opcji jQuery.

Answer 1

jQuery (która naprawdę może być używana w tym przypadku, jak sądzę), można zrobić to tak:

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

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

element.parentNode.removeChild(element); 

Answer 2

Tak, trzeba usunąć z rodzicem:

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

Answer 3

można użyć tej składni: node.parentNode

Na przykład:

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

Answer 4

Brett - czy jesteś świadomy, że getElementyByClassName wsparcie z IE 5.5 do 8 jest not there according to quirksmode?. Jeśli chcesz uzyskać zgodność z różnymi przeglądarkami, lepiej zastosować się do tej zasady:

• Uzyskaj element kontenera według identyfikatora.
• Uzyskaj potrzebne elementy podrzędne za pomocą nazwy znacznika.
• Powtórz nad dziećmi, przetestuj dopasowanie właściwości className.
• elements[i].parentNode.removeChild(elements[i]), jak powiedzieli inni faceci.

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

Here's a quick demo.

EDIT: Oto poprawiona wersja, specyficzne dla znaczników:

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

Problemem była moja wina; po usunięciu elementu z wynikowej tablicy elementów zmienia się długość, 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 tymi, usuwając każdy z DOM.

Try it here.

Answer 5

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

Answer 6

pominięcia elementów bug w tej (kod od 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 rozwiązać po prostu uruchamiają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]); 
    } 
} 

Answer 7

Można użyć prostego rozwiązania, wystarczy zmienić klasę, filtr Collection HTML jest aktualizowana:

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

Answer 8

Bez jQuery, można zrobić:

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

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

Answer 9

Korzystanie z ES6 możesz zrobić:

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>

Answer 10

W przypadku, gdy 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(); 
}); 

Answer 11

Wolę używając forEach nad for/while pętli. W celu wykorzystania trzeba konwertować HTMLCollection do Array pierwszy:

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

zwrócić uwagę, że nie ma potrzeby najbardziej efektywny sposób. O wiele bardziej elegancka dla mnie.