การลบองค์ประกอบตามชื่อคลาส?

ฉันมีรหัสด้านล่างเพื่อค้นหาองค์ประกอบที่มีชื่อคลาส:

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

}

ฉันไม่รู้วิธีลบออก ..... ฉันต้องอ้างอิงผู้ปกครองหรืออะไร? วิธีที่ดีที่สุดในการจัดการสิ่งนี้คืออะไร?

@ Karim79:

นี่คือ 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]);
    }
}

นี่คือ 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>

แก้ไข:จบลงด้วยการใช้ตัวเลือก jQuery

การใช้ jQuery (ซึ่งคุณสามารถใช้ในกรณีนี้ได้) คุณสามารถทำได้ดังนี้:

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

มิฉะนั้นคุณจะต้องใช้พาเรนต์ของแต่ละองค์ประกอบเพื่อลบออก:

element.parentNode.removeChild(element);

หากคุณไม่ต้องการใช้ JQuery:

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

การใช้ES6คุณสามารถทำได้ดังนี้:

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>

ใน Javascript แท้โดยไม่มี jQuery หรือ ES6 คุณสามารถทำได้:

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

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

สิ่งนี้ใช้ได้กับฉัน

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

เบร็ท - คุณทราบว่าgetElementyByClassNameการสนับสนุนจาก IE 5.5-8 คือไม่ได้มีตาม quirksmode ? คุณจะดีกว่าถ้าทำตามรูปแบบนี้หากคุณสนใจเกี่ยวกับความเข้ากันได้ข้ามเบราว์เซอร์:

• รับองค์ประกอบคอนเทนเนอร์ตาม ID
• รับองค์ประกอบย่อยที่จำเป็นตามชื่อแท็ก
• วนซ้ำเด็กทดสอบคุณสมบัติ className ที่ตรงกัน
• elements[i].parentNode.removeChild(elements[i]) เหมือนที่คนอื่น ๆ พูด

ตัวอย่างด่วน:

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

นี่คือตัวอย่างสั้น ๆ

แก้ไข: นี่คือเวอร์ชันคงที่เฉพาะสำหรับมาร์กอัปของคุณ:

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

ปัญหาคือความผิดของฉัน เมื่อคุณลบองค์ประกอบออกจากอาร์เรย์ขององค์ประกอบที่เป็นผลลัพธ์ความยาวจะเปลี่ยนไปดังนั้นองค์ประกอบหนึ่งจะถูกข้ามไปในการวนซ้ำแต่ละครั้ง วิธีแก้ปัญหาคือการจัดเก็บการอ้างอิงไปยังแต่ละองค์ประกอบในอาร์เรย์ชั่วคราวจากนั้นจึงวนซ้ำองค์ประกอบเหล่านั้นโดยลบแต่ละองค์ประกอบออกจาก DOM

ลองดูที่นี่

ฉันชอบใช้forEachover for/ whilelooping ในการใช้งานจำเป็นต้องแปลงHTMLCollectionเป็นArrayอันดับแรก:

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

ให้ความสนใจไม่ใช่วิธีที่มีประสิทธิภาพสูงสุด สง่างามมากขึ้นสำหรับฉัน

หนึ่งบรรทัด

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

ตัวอย่างเช่นคุณสามารถทำได้ในหน้านี้เพื่อลบ userinfo

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

ใช่คุณต้องลบออกจากผู้ปกครอง:

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

คุณสามารถใช้ไวยากรณ์นี้: node.parentNode

ตัวอย่างเช่น:

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

ฟังก์ชันเรียกซ้ำอาจช่วยแก้ปัญหาของคุณได้ดังต่อไปนี้

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

ในกรณีที่คุณต้องการลบองค์ประกอบที่เพิ่มแบบไดนามิกให้ลองทำดังนี้:

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

หรือ

const elem= document.getElementsByClassName('column')

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

มันง่ายมากหนึ่งซับโดยใช้ตัวดำเนินการกระจาย ES6 เนื่องจาก document.getElementByClassName ส่งคืนคอลเล็กชัน HTML

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

ข้อผิดพลาดขององค์ประกอบการข้ามในสิ่งนี้ (โค้ดจากด้านบน)

var len = cells.length;
for(var i = 0; i < len; i++) {
    if(cells[i].className.toLowerCase() == "column") {
        cells[i].parentNode.removeChild(cells[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]);
   }
}

คุณสามารถใช้วิธีง่ายๆเพียงแค่เปลี่ยนคลาสตัวกรองคอลเล็กชัน HTML ได้รับการอัปเดต:

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

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

อ้างอิง: http://www.w3.org/TR/2011/WD-html5-author-20110705/common-dom-interfaces.html