كيف يمكنني إزالة عقدة الطفل في HTML باستخدام جافا سكريبت ؟

Question

هل هناك وظيفة مثل document.getElementById("FirstDiv").clear()?

Answer 1

للإجابة على السؤال الأصلي - هناك طرق مختلفة للقيام بذلك ، ولكن بعد أن يكون أبسط.

إذا كان لديك بالفعل التعامل مع الطفل العقدة التي تريد إزالتها ، أيلديك متغير جافا سكريبت الذي يحمل إشارة إلى ذلك:

myChildNode.parentNode.removeChild(myChildNode);

من الواضح إذا كنت لا تستخدم واحدة من العديد من المكتبات التي تفعل هذا بالفعل, كنت ترغب في إنشاء وظيفة مجردة ذلك:

function removeElement(node) {
    node.parentNode.removeChild(node);
}

---

تحرير:كما ذكر من قبل الآخرين:إذا كان لديك أي معالجات الأحداث السلكية تصل إلى العقدة أنت إزالة, سوف تحتاج إلى تأكد من قطع تلك قبل الماضي إشارة إلى عقدة يتم إزالتها يخرج من نطاق لئلا الفقراء تطبيقات جافا سكريبت مترجم تسرب الذاكرة.

Answer 2

إذا كنت ترغب في مسح div وإزالة جميع الأطفال العقد ، يمكن وضع:

var mydiv = document.getElementById('FirstDiv');
while(mydiv.firstChild) {
  mydiv.removeChild(mydiv.firstChild);
}

Answer 3

targetNode.إزالة()

هذا هو الموصى به من قبل W3C اعتبارا من أواخر عام 2015 ، الفانيليا JS.أفضل/نظافة من الطريقة السابقة.

للاستخدام الخاص بك الحالة:

document.getElementById("FirstDiv").remove();

إذا كنت بحاجة إلى polyfill لضمان التوافق:

if (!('remove' in Element.prototype)) {
    Element.prototype.remove = function() {
        if (this.parentNode) {
            this.parentNode.removeChild(this);
        }
    };
}

موزيلا مستندات

المتصفحات المدعومة - 92% مارس 2018

Answer 4

لديك لإزالة أي معالجات الأحداث التي قمت بتعيينها على العقدة قبل إزالته ، لتجنب تسرب الذاكرة في IE

Answer 5

مسج الحل

HTML

<select id="foo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

جافا سكريبت

// remove child "option" element with a "value" attribute equal to "2"
$("#foo > option[value='2']").remove();

// remove all child "option" elements
$("#foo > option").remove();

المراجع:

السمة يساوي محدد [name=قيمة]

يختار العناصر التي لديك المحدد السمة مع قيمة بالضبط يساوي قيمة معينة.

الطفل محدد ("الأم والطفل>")

يختار كل المباشر الطفل العناصر المحدد من قبل "الطفل" من العناصر المحدد من قبل "الأم"

.إزالة()

مماثلة .فارغة ()،.إزالة() الطريقة تأخذ عناصر من DOM.نستخدمها .إزالة() عندما نريد أن إزالة عنصر نفسها ، وكذلك كل شيء في داخله.بالإضافة إلى العناصر نفسها ، كل بد الأحداث مسج البيانات المرتبطة العناصر إزالتها.

Answer 6

استخدام التعليمات البرمجية التالية:

//for Internet Explorer
document.getElementById("FirstDiv").removeNode(true);

//for other browsers
var fDiv = document.getElementById("FirstDiv");
fDiv.removeChild(fDiv.childNodes[0]); //first check on which node your required node exists, if it is on [0] use this, otherwise use where it exists.

Answer 7

    var p=document.getElementById('childId').parentNode;
    var c=document.getElementById('childId');
    p.removeChild(c);
    alert('Deleted');

p هو العقدة الأصل و " ج " هو عقدة الطفل
parentNode هو متغير جافا سكريبت الذي يحتوي على الوالدين المرجعية

من السهل أن نفهم

Answer 8

يجب أن تكون قادرة على استخدام .RemoveNode طريقة العقدة أو .RemoveChild طريقة العقدة الأصل.

Answer 9

ربما يجب عليك استخدام مكتبة جافا سكريبت أن تفعل أشياء مثل هذه.

على سبيل المثال ، MochiKit لديه وظيفة removeElement, و له مسج إزالة.