إزالة عنصر دوم دون معرفة الأصل؟

Question

هل من الممكن إزالة عنصر dom ليس له أصل آخر غير علامة الجسم؟أعلم أن هذا سيكون سهلاً باستخدام إطار عمل مثل jquery، لكنني أحاول الالتزام بجافا سكريبت المباشر.

إليك الكود الذي وجدته للقيام بذلك بطريقة أخرى:

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}   

شكرًا!

Answer 1

يجب أن تكون قادرًا على الحصول على أصل العنصر، ثم إزالة العنصر منه

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

تحديث

يمكنك تعيين هذا كطريقة جديدة على HTMLElement:

HTMLElement.prototype.remove = function() { this.parentNode.removeChild(this); return this; }

ثم افعل el.remove() (والذي سيعيد العنصر أيضًا)

Answer 2

childDiv.remove();

ويعمل في كروم 25.0.1364.155

لاحظ أن هذا لا يعمل في IE11 أو أوبرا ميني ولكن بدعم من جميع المتصفحات الأخرى.

وانظر هنا: إشارة إلى childnode-إزالة على caniuse

Answer 3

وأعتقد أنك تستطيع أن تفعل شيئا من هذا القبيل ...

var child = document.getElementById(childDiv);
//var parent = document.getElementById(parentDiv);
child.parentNode.removeChild(child);

node.parentNode للحصول على مزيد من المعلومات عن ذلك.

Answer 4

document.body.removeChild(child);

Answer 5

وإزالة عنصر باستخدام خاصية outerHTML

remElement(document.getElementById('title'));
remElement(document.getElementById('alpha'));

function remElement(obj) {
obj.outerHTML="";
}

Answer 6

وهذه الوظيفة لإزالة ببساطة عنصر باستخدام معرف:

function removeElement (id) { 
  document.getElementById(id).parentElement.removeChild(document.getElementById(id));
}

Answer 7

حسنًا، لا تحتاج في الأساس إلى معرفة الأصل لحذف عنصر DOM من DOM، انظر إلى الكود أدناه وانظر كيف يتم ترتيب حذف عنصر العقدة في JavaScript:

Element + parentNode + removeChild(Element);

كما ترون، نجد العنصر أولاً، ثم نستخدم .parentNode ثم نزيل العنصر الفرعي وهو العنصر مرة أخرى، لذلك لا نحتاج إلى معرفة الأصل على الإطلاق!

والآن انظر إلى الكود الحقيقي:

var navigation = document.getElementById('navigation');
if(navigation) {
  navigation.parentNode.removeChild(navigation);
}

أو كوظيفة

function removeNode(element) {
  if(element) { //check if it's not null
    element.parentNode.removeChild(element);
  } 
} //call it like : removeNode(document.getElementById('navigation'));

يحتوي jQuery أيضًا على وظيفة إزالة () والتي يتم استخدامها على نطاق واسع، مثل:

$('#navigation').remove();

هناك أيضا مواطن ChildNode.remove() وهو غير موجود في IE والمتصفحات القديمة، ولكن يمكنك ملئه، انظر إلى polyfill المقترح من MDN:

بوليفيل
يمكنك تعديل طريقة remove () في Internet Explorer 9 وأعلى مع الكود التالي:

//from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('remove')) {
      return;
    }
    Object.defineProperty(item, 'remove', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function remove() {
        this.parentNode.removeChild(this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

إذا كنت ترغب في معرفة المزيد عنه، قم بزيارة هذا وصلة على MDN.