एक माता-पिता से सभी बच्चे नोड निकालें?


79

मेरे पास एक सूची है, मैं बस सभी बच्चे नोड्स को इससे दूर करना चाहता हूं। Jquery का उपयोग करने का सबसे कुशल तरीका क्या है? यह वही है जो मेरे पास है:

<ul id='foo'>
  <li>a</li>
  <li>b</li>
</ul>

var thelist = document.getElementById("foo");   
while (thelist.hasChildNodes()){
    thelist.removeChild(thelist.lastChild);
}

क्या प्रत्येक आइटम को हटाने के बजाय एक शॉर्टकट है, एक बार में एक?

----------- संपादित करें ----------------

प्रत्येक सूची तत्व में कुछ डेटा जुड़ा होता है, और एक क्लिक हैंडलर इस प्रकार होता है:

$('#foo').delegate('li', 'click', function() {
    alert('hi!');
});

// adds element to the list at runtime
function addListElement() {
    var element = $('<li>hi</hi>');
    element.data('grade', new Grade());
}

अंततः मैं प्रति सूची आइटम में बटन भी जोड़ सकता हूं - इसलिए यह खाली जैसा दिखता है () जाने का रास्ता है, यह सुनिश्चित करने के लिए कि कोई मेमोरी लीक नहीं है?


किन शब्दों में कुशल? प्रदर्शन, पठनीयता?
गुम्बो

@ गंबो के सवालों में जोड़कर, मेमोरी कितनी चिंताजनक है? क्या इन वस्तुओं में इवेंट हैंडलर बंधे हैं?
निक Craver

अद्यतन जवाब दिया, हाँ .empty()जाने के लिए, से बाहर डेटा साफ़ करने के तरीका होगा $.cacheकि element.data('grade', new Grade());में कहते हैं।
निक Craver

हाँ, डेटा बाउंड है, और हो सकता है कि ईवेंट हैंडलर अंततः बंधे हों (अभी मैं सभी मदों के लिए एक प्रतिनिधि का उपयोग कर रहा हूं)।
user246114

@NickCraver मैं यहां सिर्फ स्पिटबॉल कर रहा हूं, लेकिन यहां तक ​​कि JSआप इसका इस्तेमाल भी कर सकते हैंtheList.innerHTML=""
जॉन स्ट्रॉड

जवाबों:


185

आप इस.empty() तरह का उपयोग कर सकते हैं :

$("#foo").empty();

डॉक्स से :

DOM से मिलान तत्वों के सेट के सभी बच्चे नोड्स निकालें।


6
इसके अलावा ध्यान देने योग्य (डॉक्स से) मेमोरी लीक से बचने के लिए, jQuery स्वयं तत्वों को हटाने से पहले बाल निर्माण से डेटा और ईवेंट हैंडलर जैसे अन्य निर्माणों को हटा देता है।
user113716

1
@patrick - +1, अक्सर अनुशंसित होने पर इस मार्ग पर जाने का एक और कारण .html(''), क्योंकि डेटा को तत्व पर संग्रहीत नहीं किया जाता है क्योंकि कई लोग लीक के कारणों को भूल जाते हैं।
निक Craver

1
+1 यह भी, यदि आप निश्चित हैं कि माता-पिता के बच्चों के लिए कोई घटना नहीं हुई है तो $("#foo")[0].innerHTML="";यह और तेज़ होगा। बस सावधान रहें आप इस तरह से तत्वों को हटाते समय किसी भी मेमोरी लीक का कारण नहीं बनते हैं ( empty()यह सुनिश्चित करने के लिए पहले से ही बहुत ध्यान रखता है, खासकर आईई में)।
डेविड मर्डोक

@ डेविड - घटनाएँ सभी ब्राउज़रों में एक समस्या होगी, लेकिन अच्छी बात यह है कि IE में अन्य मेमोरी मुद्दे हैं, उनमें से बहुत सारे हैं। चूंकि घटनाएँ वास्तव $.cacheमें डेटा में किसी भी चीज़ के साथ संग्रहीत होती हैं , इसलिए इसे html सेटिंग कॉल के साथ हटाया नहीं जाएगा।
निक Craver

1
ठीक है अद्यतन प्रश्न, हाँ, मेरे पास प्रत्येक तत्व से जुड़ा कुछ डेटा है, इसलिए ऐसा लगता है कि खाली () जाने का रास्ता है।
user246114

5

अन्य उपयोगकर्ताओं ने सुझाव दिया,

.empty()

यह पर्याप्त है, क्योंकि यह सभी वंशज नोड्स (टैग-नोड्स और टेक्स्ट-नोड्स) और उन नोड्स के अंदर संग्रहीत सभी प्रकार के डेटा को हटा देता है। देखें JQuery के एपीआई खाली प्रलेखन

यदि आप डेटा रखना चाहते हैं, उदाहरण के लिए घटना संचालकों की तरह, तो आपको उपयोग करना चाहिए

.detach()

जैसा कि JQuery के API डिटैच डॉक्यूमेंट पर वर्णित है ।

विधि .remove () समान उद्देश्यों के लिए उपयोगी हो सकती है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.