ลบองค์ประกอบตามรหัส

เมื่อลบองค์ประกอบด้วย JavaScript มาตรฐานคุณต้องไปที่แม่ของมันก่อน:

var element = document.getElementById("element-id");
element.parentNode.removeChild(element);

ต้องไปที่โหนดหลักก่อนดูแปลกสำหรับฉันมีเหตุผลที่ใช้งาน JavaScript เช่นนี้?

ฉันรู้ว่าการเพิ่มฟังก์ชั่น DOM ดั้งเดิมไม่ใช่วิธีที่ดีที่สุดหรือได้รับความนิยมสูงสุดเสมอไป แต่สิ่งนี้ใช้ได้ดีสำหรับเบราว์เซอร์สมัยใหม่

Element.prototype.remove = function() {
    this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
    for(var i = this.length - 1; i >= 0; i--) {
        if(this[i] && this[i].parentElement) {
            this[i].parentElement.removeChild(this[i]);
        }
    }
}

และจากนั้นคุณสามารถลบองค์ประกอบเช่นนี้

document.getElementById("my-element").remove();

หรือ

document.getElementsByClassName("my-elements").remove();

หมายเหตุ:วิธีนี้ใช้ไม่ได้กับ IE 7 และด้านล่าง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการขยาย DOM อ่านบทความ

แก้ไข : การตรวจสอบคำตอบของฉันในปี 2562 node.remove()มาถึงการช่วยเหลือและสามารถนำมาใช้ดังต่อไปนี้ (โดยไม่ต้องใส่ polyfill ด้านบน):

document.getElementById("my-element").remove();

หรือ

[...document.getElementsByClassName("my-elements")].map(n => n && n.remove());

ฟังก์ชั่นเหล่านี้มีอยู่ในเบราว์เซอร์สมัยใหม่ทั้งหมด (ไม่ใช่ IE) อ่านเพิ่มเติมเกี่ยวกับMDN

Crossbrowser และ IE> = 11:

document.getElementById("element-id").outerHTML = "";

คุณสามารถสร้างremoveฟังก์ชั่นเพื่อที่คุณจะได้ไม่ต้องคิดถึงมันทุกครั้ง:

function removeElement(id) {
    var elem = document.getElementById(id);
    return elem.parentNode.removeChild(elem);
}

มันเป็นสิ่งที่เป็น DOM สนับสนุน ค้นหาหน้านั้นสำหรับ "remove" หรือ "delete" และremoveChildเป็นเพียงเพจเดียวที่ลบโหนด

DOM ถูกจัดระเบียบในแผนผังของโหนดโดยที่แต่ละโหนดมีค่าพร้อมกับรายการของการอ้างอิงไปยังโหนดชายด์ ดังนั้นelement.parentNode.removeChild(element)เลียนแบบสิ่งที่เกิดขึ้นภายใน: ขั้นแรกให้คุณไปที่โหนดแม่จากนั้นลบการอ้างอิงไปยังโหนดลูก

ในฐานะของ DOM4 element.remove()ฟังก์ชั่นการช่วยเหลือมีไว้เพื่อทำสิ่งเดียวกัน: ใช้งานได้ใน 87% ของเบราว์เซอร์ (จนถึงปี 2559) แต่ไม่ใช่ IE 11 หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าคุณสามารถ:

• ลบองค์ประกอบผ่านโหนดแม่ในขณะที่คำถาม ,
• แก้ไขฟังก์ชัน DOM ดั้งเดิมเช่นเดียวกับในคำตอบของ Johan Dettmarหรือ
• ใช้polyfill DOM4

สำหรับการลบองค์ประกอบเดียว:

 var elem = document.getElementById("yourid");
 elem.parentElement.removeChild(elem);

สำหรับการลบองค์ประกอบทั้งหมดด้วยตัวอย่างเช่นชื่อคลาสที่แน่นอน:

 var list = document.getElementsByClassName("yourclassname");
 for(var i = list.length - 1; 0 <= i; i--)
 if(list[i] && list[i].parentElement)
 list[i].parentElement.removeChild(list[i]);

คุณสามารถใช้ element.remove()

ChildNode.remove()วิธีการเอาวัตถุจากต้นไม้มันเป็น

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

นี่คือซอที่แสดงวิธีที่คุณสามารถโทร document.getElementById('my-id').remove()

https://jsfiddle.net/52kp584L/

**

ไม่จำเป็นต้องขยาย NodeList มันได้รับการดำเนินการแล้ว

**

คุณสามารถลบองค์ประกอบนั้นโดยตรงโดยใช้remove()วิธีการของ DOM

นี่คือตัวอย่าง:

let subsWrapper = document.getElementById("element_id");
subsWrapper.remove();
//OR directly.
document.getElementById("element_id").remove();

ตาม DOM ระดับ 4 รายละเอียดซึ่งเป็นรุ่นปัจจุบันในการพัฒนามีบางวิธีการกลายพันธุ์ที่มีประโยชน์ใหม่ที่สามารถใช้ได้: append(), prepend(), before(), after(), และreplace()remove()

https://catalin.red/removing-an-element-with-plain-javascript-remove-method/

ต้องไปที่โหนดหลักก่อนดูแปลกสำหรับฉันมีเหตุผลที่ใช้งาน JavaScript เช่นนี้?

ชื่อฟังก์ชั่นคือremoveChild()และเป็นไปได้อย่างไรที่จะลบเด็กเมื่อไม่มีผู้ปกครอง? :)

ในทางกลับกันคุณไม่จำเป็นต้องโทรหาทุกครั้งที่แสดง element.parentNodeเป็นเพียงผู้ช่วยที่จะได้รับโหนดหลักของโหนดที่กำหนด หากคุณรู้จักโหนดพาเรนต์แล้วคุณสามารถใช้มันได้ดังนี้:

Ex:

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

================================================== =======

ในการเพิ่มอะไรเพิ่มเติม:

คำตอบบางคนได้ชี้ให้เห็นว่าแทนการใช้คุณสามารถใช้parentNode.removeChild(child); elem.remove();แต่อย่างที่ฉันสังเกตเห็นมีความแตกต่างระหว่างสองฟังก์ชั่นและไม่ได้กล่าวถึงในคำตอบเหล่านั้น

หากคุณใช้removeChild()มันจะส่งคืนการอ้างอิงไปยังโหนดที่ถูกลบออก

var removedChild = element.parentNode.removeChild(element); 
console.log(removedChild); //will print the removed child.

แต่ถ้าคุณใช้elem.remove();มันจะไม่ส่งคืนข้อมูลอ้างอิงให้คุณ

var el = document.getElementById('Example');
var removedChild = el.remove(); //undefined

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

พฤติกรรมนี้สามารถสังเกตได้ใน Chrome และ FF ฉันเชื่อว่ามันคุ้มค่าที่จะสังเกตเห็น :)

หวังว่าคำตอบของฉันจะเพิ่มคุณค่าให้กับคำถามและจะเป็นประโยชน์ !!

ฟังก์ชั่นที่ใช้ ele.parentNode.removeChild (ele) จะไม่ทำงานกับองค์ประกอบที่คุณสร้างขึ้น แต่ยังไม่ได้แทรกลงใน HTML ไลบรารีอย่าง jQuery และ Prototype ใช้วิธีการดังต่อไปนี้เพื่อหลีกเลี่ยงข้อ จำกัด ดังกล่าว

_limbo = document.createElement('div');
function deleteElement(ele){
    _limbo.appendChild(ele);
    _limbo.removeChild(ele);
}

ฉันคิดว่า JavaScript ทำงานอย่างนั้นเพราะนักออกแบบดั้งเดิมของ DOM มีผู้ปกครอง / เด็กและการนำทางก่อนหน้า / ถัดไปเป็นลำดับความสำคัญสูงกว่าการปรับเปลี่ยน DHTML ที่เป็นที่นิยมในปัจจุบัน ความสามารถในการอ่านจาก <input type = 'text'> และเขียนไปยังอีกตำแหน่งหนึ่งใน DOM นั้นมีประโยชน์ในช่วงกลางยุค 90 เวลาที่การสร้างแบบไดนามิกของรูปแบบ HTML ทั้งหมดหรือองค์ประกอบ GUI แบบโต้ตอบแทบจะไม่กระพริบตา สายตาของนักพัฒนาบางคน

ต้องไปที่โหนดหลักก่อนดูแปลกสำหรับฉันมีเหตุผลที่ใช้งาน JavaScript เช่นนี้?

IMHO: เหตุผลนี้เหมือนกับที่ฉันเห็นในสภาพแวดล้อมอื่น: คุณกำลังดำเนินการตาม "ลิงก์" ของคุณกับบางสิ่ง คุณไม่สามารถลบได้ในขณะที่คุณเชื่อมโยงอยู่

เหมือนการตัดกิ่งไม้ นั่งข้าง ๆ ต้นไม้ที่ใกล้ที่สุดขณะตัดหรือผลที่ตามมาคือ ... โชคร้าย (แม้ว่าจะตลก)

อันนี้จริงมาจาก FireFox ... ครั้งหนึ่ง IE อยู่ข้างหน้าของแพ็คและอนุญาตให้ลบองค์ประกอบโดยตรง

นี่เป็นเพียงข้อสันนิษฐานของฉัน แต่ฉันเชื่อว่าเหตุผลที่คุณต้องลบเด็กผ่านผู้ปกครองเกิดจากปัญหาเกี่ยวกับวิธีที่ FireFox จัดการกับการอ้างอิง

หากคุณเรียกใช้วัตถุเพื่อกระทำ hari-kari โดยตรงจากนั้นทันทีหลังจากมันตายคุณยังถือการอ้างอิงนั้นอยู่ สิ่งนี้มีความเป็นไปได้ที่จะสร้างข้อผิดพลาดที่น่ารังเกียจหลายอย่าง ... เช่นไม่สามารถลบออกได้ทำการลบมัน แต่ทำให้การอ้างอิงนั้นดูเหมือนว่าถูกต้องหรือหน่วยความจำรั่ว

ฉันเชื่อว่าเมื่อพวกเขาตระหนักถึงปัญหาการแก้ไขคือการลบองค์ประกอบผ่านทางผู้ปกครองเพราะเมื่อองค์ประกอบหายไปตอนนี้คุณเพียงแค่ถือการอ้างอิงไปยังผู้ปกครอง สิ่งนี้จะหยุดสิ่งที่ไม่พึงประสงค์ทั้งหมดและ (ถ้าปิดโหนดต้นไม้ตามโหนด) จะ 'zip-up' ค่อนข้างดี

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

ทั้งหมดนี้เป็นเพียงการคาดเดาของฉัน

อย่างไรก็ตามฉันหวังว่าจะถึงวันที่ในที่สุดการเขียนโปรแกรมเว็บจะได้รับการทำความสะอาดสปริงอย่างเต็มที่สิ่งที่แปลกประหลาดเล็กน้อยเหล่านี้จะถูกทำความสะอาดและทุกคนก็เริ่มเล่นตามกฎเดียวกัน

อาจจะเป็นวันหนึ่งหลังจากที่คนรับใช้หุ่นยนต์ของฉันฟ้องฉันสำหรับค่าจ้างกลับ

จากสิ่งที่ฉันเข้าใจการลบโหนดโดยตรงไม่ทำงานใน Firefox เพียง Internet Explorer ดังนั้นเพื่อรองรับ Firefox คุณต้องขึ้นไปที่ผู้ปกครองเพื่อลบมันออก

Ref: http://chiragrdarji.wordpress.com/2007/03/16/removedelete-element-from-page-using-javascript-working-in-firefoxieopera/

// http://javascript.crockford.com/memory/leak.html
// cleans dom element to prevent memory leaks
function domPurge(d) {
    var a = d.attributes, i, l, n;
    if (a) {
        for (i = a.length - 1; i >= 0; i -= 1) {
            n = a[i].name;
            if (typeof d[n] === 'function') {
                d[n] = null;
            }
        }
    }
    a = d.childNodes;
    if (a) {
        l = a.length;
        for (i = 0; i < l; i += 1) {
            domPurge(d.childNodes[i]);
       }
    }
}

function domRemove(id) {
    var elem = document.getElementById(id);
    domPurge(elem);
    return elem.parentNode.removeChild(elem);
}

นี่เป็นฟังก์ชันที่ดีที่สุดในการลบองค์ประกอบโดยไม่มีข้อผิดพลาดของสคริปต์:

function Remove(EId)
{
    return(EObj=document.getElementById(EId))?EObj.parentNode.removeChild(EObj):false;
}

EObj=document.getElementById(EId)หมายเหตุ

==นี้เป็นหนึ่งในเครื่องหมายเท่ากับไม่ได้

ถ้าองค์ประกอบที่มีอยู่แล้วฟังก์ชั่นเอาไว้มิฉะนั้นก็จะส่งกลับเท็จไม่EIderror