Loại bỏ các yếu tố theo tên lớp?

Tôi có đoạn mã dưới đây để tìm các phần tử với tên lớp của chúng:

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

}

Tôi chỉ không biết làm thế nào để loại bỏ chúng ..... TÔI CÓ PHẢI tham khảo cha mẹ hay gì không? Cách tốt nhất để xử lý việc này là gì?

@ Karim79:

Đây là 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]);
    }
}

Đây là 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>

Chỉnh sửa: Kết thúc tốt đẹp chỉ bằng cách sử dụng tùy chọn jQuery.

Sử dụng jQuery (mà bạn thực sự có thể sử dụng trong trường hợp này, tôi nghĩ vậy), bạn có thể làm như vậy:

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

Mặt khác, bạn sẽ cần sử dụng cha mẹ của từng thành phần để xóa nó:

element.parentNode.removeChild(element);

Nếu bạn không thích sử dụng JQuery:

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

Sử dụng ES6 bạn có thể làm như sau:

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>

Trong Javascript thuần túy, không có jQuery hoặc ES6, bạn có thể làm:

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

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

Điều này làm việc cho tôi

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

Brett - bạn có biết rằng getElementyByClassNamehỗ trợ từ IE 5.5 đến 8 không có theo quirksmode không? Bạn sẽ tốt hơn nếu theo mô hình này nếu bạn quan tâm đến khả năng tương thích giữa nhiều trình duyệt:

• Nhận phần tử container bằng ID.
• Nhận các yếu tố con cần thiết theo tên thẻ.
• Lặp lại trên trẻ em, kiểm tra để phù hợp với thuộc tính className.
• elements[i].parentNode.removeChild(elements[i]) như những người khác nói.

Ví dụ nhanh:

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

Đây là một bản demo nhanh.

EDIT: Đây là phiên bản cố định, dành riêng cho đánh dấu của bạn:

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

Vấn đề là lỗi của tôi; khi bạn loại bỏ một phần tử khỏi mảng kết quả của các phần tử, độ dài sẽ thay đổi, do đó, một phần tử sẽ bị bỏ qua ở mỗi lần lặp. Giải pháp là lưu trữ một tham chiếu đến từng phần tử trong một mảng tạm thời, sau đó lặp lại các phần tử đó, loại bỏ từng phần tử khỏi DOM.

Hãy thử nó ở đây.

Tôi thích sử dụng forEachhơn for/ whilevòng lặp. Để sử dụng, cần phải chuyển đổi HTMLCollectionthành Arrayđầu tiên:

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

Hãy chú ý, nó không cần thiết là cách hiệu quả nhất. Thanh lịch hơn nhiều đối với tôi.

Một đường thẳng

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

Ví dụ: bạn có thể làm trong trang này để xóa userinfo

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

Có, bạn phải xóa khỏi cha mẹ:

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

Bạn có thể sử dụng cú pháp này: node.parentNode

Ví dụ:

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

Hàm đệ quy có thể giải quyết vấn đề của bạn như dưới đây

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

Trong trường hợp bạn muốn loại bỏ các yếu tố được thêm động, hãy thử điều này:

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

HOẶC LÀ

const elem= document.getElementsByClassName('column')

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

Rất đơn giản, một lớp lót, sử dụng toán tử trải rộng ES6 do document.getEuityByClassName trả về một bộ sưu tập HTML.

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

Các yếu tố bỏ qua lỗi trong này (mã từ trên)

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

có thể được sửa bằng cách chỉ chạy vòng lặp ngược như sau (để không cần mảng tạm thời)

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

Bạn có thể sử dụng một giải pháp đơn giản, chỉ cần thay đổi lớp, bộ lọc Bộ sưu tập HTML được cập nhật:

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

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

Tham chiếu: http://www.w3.org/TR/2011/WD-html5-master-20110705/common-dom-interfaces.html