मतभेद - jQuery

136

hide() का मिलान नहीं हुआ तत्वों 'सीएसएस none करने के लिए display संपत्ति सेट।

remove() पूरी तरह से डोम से मेल खाने वाले तत्वों को हटा देता है।

detach()remove() जैसा है, लेकिन संग्रहित डेटा और मिलान किए गए तत्वों से जुड़े ईवेंट को रखता है।

डोम में एक अलग तत्व फिर से सम्मिलित करने के लिए, बस detach() से लौटे jQuery सेट सम्मिलित करें:

var span = $('span').detach(); 

... 

span.appendTo('body');

स्रोत

2011-02-09 06:51:54

+7

पर एक नज़र (सही) लेते हैं, आप सस्ते टेम्पलेटिंग के लिए अलग-अलग उपयोग कर सकते हैं जो jquery लाइव इवेंट से बचाता है: http://jsfiddle.net/b9chris/PNd2t/ –

+0

मुझे अभी भी अंतर दिखाई नहीं देता है। अगर मैं 'डिटेच' के स्थिर में 'निकालें' का उपयोग करता हूं, तो उदाहरण अभी भी काम करता है। – comecme

+10

@comecme: यदि आपने एक क्लिक हैंडलर की अवधि में एक ईवेंट को बाध्य किया है, तो 'हटाएं()' पर कॉल करें, और इसे फिर से संलग्न करें, बाध्यकारी चलेगा और अवधि पर क्लिक करने से कुछ भी नहीं होगा। यदि आप 'डिटेच()' और रीटैच कहते हैं, बाध्यकारी रहता है और क्लिक हैंडलर काम करता रहता है। – jpatokal

12

hide() कोई भी करने के लिए मिलान तत्व के प्रदर्शन करता है।

detach() सभी पाठ और बच्चे नोड्स सहित मिलान किया तत्वों को निकाल देता है।

यह विधि तत्व से जुड़े सभी डेटा संग्रहीत करती है और इसलिए तत्व के डेटा के साथ-साथ ईवेंट हैंडलर को पुनर्स्थापित करने के लिए भी इसका उपयोग किया जा सकता है।

remove() सभी टेक्स्ट और बाल नोड्स सहित मिलान किए गए तत्वों को भी हटा देता है।

हालांकि, इस मामले में केवल तत्व का डेटा बहाल किया जा सकता है, न कि इसके ईवेंट हैंडलर नहीं कर सकते हैं।

स्रोत

2012-09-21 13:26:58 Kumar

11

jQuery में, डीओएम से तत्वों को हटाने के लिए तीन विधियां हैं। ये तीन विधियां .empty(), .remove(), और .detach() हैं। इन सभी विधियों का उपयोग डोम से तत्वों को हटाने के लिए किया जाता है, लेकिन वे सभी अलग हैं।

.hide()

मिलान किया तत्वों छुपाएं।

$(".box").hide();

.empty()

.empty() विधि से सभी बच्चे नोड्स और सामग्री को हटा: कोई पैरामीटर के साथ, .hide() विधि का सबसे सरल तरीका किसी HTML तत्व को छिपाने के लिए है चयनित तत्व यह विधि तत्व को स्वयं या उसके गुणों को नहीं हटाती है।

नोट

.empty() विधि किसी भी तर्क मेमोरी लीक से बचने के लिए स्वीकार नहीं करता। jQuery स्वयं तत्वों को हटाने से पहले बाल तत्वों से डेटा और ईवेंट हैंडलर जैसी अन्य संरचनाओं को हटा देता है।

उदाहरण

<div class="content"> 
<div class="hai">Hai</div> 
<div class="goodevening">good evening</div> 
</div> 
<script> 
    $("div.hai").empty(); 
</script>

इस हाई पाठ के साथ एक डोम संरचना को नष्ट कर दिया में परिणाम होगा:

<div class="content"> 
<div class="hai"></div> 
<div class="goodevening">good evening</div> 
</div>

अगर हम <div class="hai"> अंदर नेस्टेड तत्वों के किसी भी संख्या के लिए किया था, वे भी हटा दिया जाएगा ।

.remove()

.remove() विधि सभी पाठ और बच्चे नोड्स सहित चयनित तत्वों को निकाल देता है। यह विधि चयनित तत्वों के डेटा और घटनाओं को भी हटा देती है।

नोट

उपयोग .remove() आप इसे अंदर तत्व में ही है, साथ ही सब कुछ दूर करने के लिए चाहते हैं। इसके अलावा, तत्वों से जुड़े सभी बाध्य घटनाओं और jQuery डेटा हटा दिए जाते हैं।

<div class="content"> 
<div class="hai">Hai</div> 
<div class="goodevening">good evening</div> 
</div> 
<script> 
    $("div.hai").remove(); 
</script>

यह <div> तत्व के साथ एक डोम संरचना को नष्ट कर दिया में परिणाम होगा:

उदाहरण

निम्नलिखित एचटीएमएल पर विचार करें

<div class="content"> 
<div class="goodevening">good evening</div> 
</div

अगर हम नेस्ट के किसी भी संख्या के लिए किया था <div class="hai"> के अंदर तत्व, उन्हें भी हटा दिया जाएगा। अन्य jQuery संरचनाएं, जैसे डेटा या ईवेंट हैंडलर भी मिटा दी जाती हैं।

.detach()

.detach() विधि सभी पाठ और बच्चे नोड्स सहित चयनित तत्वों को निकाल देता है। हालांकि, यह डेटा और घटनाओं को रखता है। यह विधि हटाए गए तत्वों की एक प्रति भी रखती है, जो उन्हें बाद में पुन: सम्मिलित करने की अनुमति देती है। जब हटाया तत्वों बाद में डोम में पुनः लगाए जा रहे हैं

नोट

.detach() विधि उपयोगी है।

उदाहरण

<!doctype html> 
<html> 
<head> 

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
<p>Hai!</p>Good <p>Afternoo</p> 
<button>Attach/detach paragraphs</button> 
<script> 
$("p").click(function() { 
$(this).toggleClass("off"); 
}); 
var p; 
$("button").click(function() { 
if (p) { 
p.appendTo("body"); 
p = null; 
} else { 
p = $("p").detach(); 
} 
}); 
</script> 
</body> 
</html>

अधिक जानकारी के लिए, पर जाएँ: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

स्रोत

2014-03-28 11:27:30 Jason

32

कुछ पेंसिल के साथ लिखा नोटों के साथ एक मेज पर कागज के एक टुकड़े की कल्पना करें।

hide -> नोट एक रबड़ के साथ हटाने
detach - -> पर इसे
empty एक कपड़े फेंक> अपने हाथ में कागज हड़पने और जो कुछ भी भविष्य की योजनाओं
remove के लिए वहाँ इसे रखने के -> कागज को पकड़ें और इसे dustbin

पेपर तत्व का प्रतिनिधित्व करता है, और नोट सामग्री (बच्चे नोड्स) का प्रतिनिधित्व करते हैं तत्व।

थोड़ा सा सरल और पूरी तरह सटीक नहीं है, लेकिन समझने में आसान है।

स्रोत

2015-12-11 08:08:27

0

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head> 
<body> 
    <script> 
     $(document).ready(function(){ 
      var $span; 
      $span = $("<span>"); 
      $span.text("Ngoc Xuan"); 
      function addEvent() { 
       $span.on("click",function(){ 
        alert("I'm Span"); 
       }); 
      } 
      function addSpan() { 

       $span.appendTo("body"); 
      } 
      function addButton(name) { 
       var $btn = $("<input>"); 
       $btn.attr({value:name, 
         type:'submit'}); 
       if(name=="remove"){ 
        $btn.on("click",function(){ 
         $("body").find("span").remove(); 
        }) 
       }else if(name=="detach"){ 
        $btn.on("click",function(){ 
         $("body").find("span").detach(); 
        }) 
       }else if(name=="Add") { 
        $btn.on("click",function(){ 
         addSpan(); 
        }) 
       }else if(name=="Event"){ 
        $btn.on("click",function(){ 
         addEvent(); 
        }) 
       }else if (name == "Hide") { 
        $btn.on("click",function(){ 
         if($span.text()!= '') 
          $span.hide(); 
        }) 
       }else { 
        $btn.on("click",function(){ 
         $span.show(); 
        }) 
       } 
       $btn.appendTo("body"); 
      } 
      (function() { 
       addButton("remove"); 
       addButton("detach"); 
       addButton("Add"); 
       addButton("Event"); 
       addButton("Hide"); 
       addButton("Show"); 
      })(); 
     }); 
    </script> 
</body> 
</html>

स्रोत

2016-05-12 04:23:00

मतभेद - jQuery

उत्तर

संबंधित मुद्दे