जावास्क्रिप्ट डीओएम तत्व हटाएं

Question

मैं परीक्षण करने की कोशिश कर रहा हूं कि कोई DOM तत्व मौजूद है या नहीं, और यदि यह अस्तित्व में है, तो इसे हटा दें, और यदि यह अस्तित्व में नहीं है तो इसे बनाएं।

var duskdawnkey = localStorage["duskdawnkey"]; 
var iframe = document.createElement("iframe"); 
var whereto = document.getElementById("debug"); 
var frameid = document.getElementById("injected_frame"); 
iframe.setAttribute("id", "injected_frame"); 
iframe.setAttribute("src", 'http://google.com'); 
iframe.setAttribute("width", "100%"); 
iframe.setAttribute("height", "400"); 

if (frameid) // check and see if iframe is already on page 
{ //yes? Remove iframe 
    iframe.removeChild(frameid.childNodes[0]); 
} else // no? Inject iframe 
{ 
    whereto.appendChild(iframe); 
    // add the newly created element and it's content into the DOM 
    my_div = document.getElementById("debug"); 
    document.body.insertBefore(iframe, my_div); 
} 

यह जांच कर रहा है कि यह कार्य मौजूद है या नहीं, तत्व कार्य करता है, लेकिन तत्व को हटाना नहीं है। असल में यह सब कोड एक बटन पर क्लिक करके किसी वेबपृष्ठ में आईफ्रेम इंजेक्ट करता है। मैं क्या करना चाहता हूं अगर आईफ्रेम पहले से ही इसे हटाने के लिए है। लेकिन किसी कारण से मैं असफल रहा हूं।

Answer 1

removeChild माता पिता पर लागू किया जाना चाहिए, अर्थात्:

if (frameid) { 
    frameid.parentNode.removeChild(frameid); 
} 

Answer 2

लगता है मैं एक पोस्ट करने के लिए पर्याप्त प्रतिनिधि नहीं है:

parent.removeChild(child); 

अपने उदाहरण में, आप की तरह कुछ करना चाहिए टिप्पणी, तो एक और जवाब करना होगा।

जब आप removeChild() का उपयोग करके नोड को अनलिंक करते हैं या माता-पिता पर आंतरिक HTML प्रॉपर्टी सेट करके, आपको यह भी सुनिश्चित करने की आवश्यकता होती है कि इसे संदर्भित करने के लिए और कुछ भी नहीं है अन्यथा यह वास्तव में नष्ट नहीं होगा और स्मृति को जन्म देगा रिसाव। RemoveChild() को कॉल करने से पहले आप कई तरीकों से नोड का संदर्भ ले सकते थे और आपको यह सुनिश्चित करना होगा कि उन संदर्भों को जो दायरे से बाहर नहीं गए हैं, स्पष्ट रूप से हटा दिए गए हैं।

डौग Crockford here कि ईवेंट हैंडलर्स IE में वृत्तीय संदर्भ का एक कारण जाना जाता है लिखता है और उन्हें स्पष्ट रूप से दूर करने का सुझाव देते हैं removeChild() कॉल

function purge(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) { 
      purge(d.childNodes[i]); 
     } 
    } 
} 

और अगर आप सावधानियों का एक बहुत लेने के आप कर सकते हैं इससे पहले कि इस प्रकार जेन्स-इनगो फर्ले here द्वारा वर्णित आईई में अभी भी मेमोरी लीक प्राप्त करें।

और आखिरकार, सोचने के जाल में मत आना कि जावास्क्रिप्ट हटाएं उत्तर है। ऐसा लगता है कि कई लोगों ने सुझाव दिया है, लेकिन नौकरी नहीं करेंगे। Hereको कंगैक्स द्वारा को समझने पर एक महान संदर्भ है।

Answer 3

अधिकांश ब्राउज़रों में, अपने माता-पिता पर .removeChild(element) पर कॉल करने से DOM से तत्व निकालने का थोड़ा और संक्षिप्त तरीका है, जिसे केवल element.remove() पर कॉल करना है। निश्चित रूप से, यह शायद डीओएम से तत्व निकालने का मानक और मूर्खतापूर्ण तरीका बन जाएगा।

.remove() विधि 2011 में डोम लिविंग स्टैंडर्ड (commit) में जोड़ा गया था, और तब से इसे क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा और एज द्वारा कार्यान्वित किया गया है। यह इंटरनेट एक्सप्लोरर के किसी भी संस्करण में समर्थित नहीं था।

यदि आप पुराने ब्राउज़र का समर्थन करना चाहते हैं, तो आपको इसे तैरने की आवश्यकता होगी। यह थोड़ा परेशान हो जाता है, क्योंकि दोनों ने ऐसा नहीं किया है कि कोई भी उद्देश्य उद्देश्य डोम शिम नहीं है जिसमें इन तरीकों को शामिल किया गया है, और क्योंकि हम केवल एक प्रोटोटाइप में विधि नहीं जोड़ रहे हैं; यह ChildNode का एक तरीका है, जो कि spec द्वारा परिभाषित एक इंटरफ़ेस है और जावास्क्रिप्ट तक पहुंच योग्य नहीं है, इसलिए हम इसके प्रोटोटाइप में कुछ भी नहीं जोड़ सकते हैं। इसलिए हमें ChildNode से प्राप्त होने वाले सभी प्रोटोटाइप ढूंढने की आवश्यकता है और वास्तव में ब्राउज़र में परिभाषित किया गया है, और .remove उन्हें जोड़ें।

यहां मैं जिस शिम के साथ आया था, जिसने आईई 8 में काम की पुष्टि की है।

(function() { 
    var typesToPatch = ['DocumentType', 'Element', 'CharacterData'], 
     remove = function() { 
      // The check here seems pointless, since we're not adding this 
      // method to the prototypes of any any elements that CAN be the 
      // root of the DOM. However, it's required by spec (see point 1 of 
      // https://dom.spec.whatwg.org/#dom-childnode-remove) and would 
      // theoretically make a difference if somebody .apply()ed this 
      // method to the DOM's root node, so let's roll with it. 
      if (this.parentNode != null) { 
       this.parentNode.removeChild(this); 
      } 
     }; 

    for (var i=0; i<typesToPatch.length; i++) { 
     var type = typesToPatch[i]; 
     if (window[type] && !window[type].prototype.remove) { 
      window[type].prototype.remove = remove; 
     } 
    } 
})(); 

यह extending DOM prototypes isn't possible before IE 8 के बाद से आईई 7 या उससे कम में काम नहीं करेगा। मुझे लगता है कि, 2015 के कगार पर ज्यादातर लोगों को ऐसी चीजों की परवाह नहीं है।

एक बार जब आप उन्हें शिम को शामिल किया है, तो आप बस बुला

element.remove(); 

Answer 4

Node.removeChild का उपयोग करना द्वारा डोम से किसी DOM तत्व element दूर करने के लिए सक्षम हो जाएगा(), आप के लिए काम करता है बस कुछ इस तरह का उपयोग करें:

var leftSection = document.getElementById('left-section'); 
leftSection.parentNode.removeChild(leftSection); 

डोम 4 में, निकालें पद्धति लागू है, लेकिन एक गरीब ब्राउज़र समर्थन है W3C के अनुसार:

विधि node.remove() को DOM 4 विनिर्देशन में लागू किया गया है। लेकिन खराब ब्राउज़र समर्थन की वजह से, आपको इसका उपयोग नहीं करना चाहिए।

लेकिन अगर आप jQuery का उपयोग कर आप निकालें विधि का उपयोग कर सकते हैं ...

$('#left-section').remove(); //using remove method in jQuery 

इसके अलावा नए फ्रेमवर्क की तरह आप कोणीय में उदाहरण *ngIf के लिए एक तत्व को दूर करने, की स्थिति का उपयोग कर सकते में

और में प्रतिक्रिया, प्रतिपादन विभिन्न विचार, शर्तों पर निर्भर करता है ...