जवाबों:
hide()मिलान किए गए तत्वों का CSS displayगुण सेट करता है none।
remove() DOM से मिलान किए गए तत्वों को पूरी तरह से हटा देता है।
detach()की तरह है remove(), लेकिन संग्रहीत डेटा और ईवेंट से मेल खाते तत्वों से जुड़ा रहता है।
DOM में एक अलग किए गए तत्व को फिर से सम्मिलित करने के लिए, बस दिए गए jQueryसेट को इसमें से डालें detach():
var span = $('span').detach();
...
span.appendTo('body');removeकी जगह में detach, उदाहरण के लिए अभी भी काम करता है।
remove(), और इसे फिर से संलग्न करें, बाइंडिंग चली जाएगी और स्पैन को क्लिक करने से कुछ नहीं होगा। यदि आप कॉल करते हैं detach()और रिटैट करते हैं, तो बाइंडिंग रुक जाती है और क्लिक हैंडलर काम करता रहता है।
पेंसिल से लिखे कुछ नोटों के साथ एक मेज पर कागज के एक टुकड़े की कल्पना करें।
hide -> उस पर एक थक्का फेंक देते हैंempty -> नोटों को इरेज़र से हटा देंdetach -> कागज को अपने हाथ में पकड़ें और भविष्य की योजनाओं के लिए इसे वहीं रखेंremove -> कागज को पकड़ो और कूड़ेदान में फेंक देंपेपर तत्व का प्रतिनिधित्व करता है, और नोट्स तत्व की सामग्री (चाइल्ड नोड्स) का प्रतिनिधित्व करते हैं।
थोड़ा सरल और पूरी तरह से सटीक नहीं, लेकिन समझने में आसान।
hide() मिलान किए गए तत्व के प्रदर्शन को कोई नहीं पर सेट करता है।
detach() सभी पाठ और बच्चे नोड्स सहित मिलान तत्वों को निकालता है।
यह विधि तत्व से जुड़े सभी डेटा को संग्रहीत करती है और इसलिए इसका उपयोग तत्व के डेटा के साथ-साथ घटना संचालकों को पुनर्स्थापित करने के लिए किया जा सकता है।
remove() सभी पाठ और बाल नोड्स सहित मिलान किए गए तत्वों को भी निकालता है।
हालांकि, इस मामले में केवल तत्व के डेटा को पुनर्स्थापित किया जा सकता है, न कि इसके इवेंट हैंडलर को।
JQuery में, DOM से एलिमेंट्स हटाने के तीन तरीके हैं। ये तीन तरीके हैं .empty(), .remove()और .detach()। इन सभी विधियों का उपयोग डोम से तत्वों को हटाने के लिए किया जाता है, लेकिन वे सभी अलग-अलग हैं।
।छिपाना()
मिलान किए गए तत्वों को छिपाएं। किसी भी पैरामीटर के साथ, .hide () विधि HTML तत्व को छिपाने का सबसे सरल तरीका है:
$(".box").hide();.empty ()
.Empty () विधि चयनित तत्वों से सभी बच्चे नोड्स और सामग्री को हटा देती है। यह विधि तत्व को स्वयं या उसके गुणों को नहीं हटाती है।
ध्यान दें
.Empty () विधि स्मृति लीक से बचने के लिए किसी भी तर्क को स्वीकार नहीं करती है। jQuery अन्य तत्वों को हटाता है, जैसे डेटा और ईवेंट हैंडलर, बाल तत्वों से स्वयं तत्वों को हटाने से पहले।
उदाहरण
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>इसके परिणामस्वरूप DOM संरचना में हाई टेक्स्ट हटा दिया जाएगा:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>अगर हमारे अंदर किसी भी प्रकार के नेस्टेड तत्व होते हैं <div class="hai">, तो उन्हें भी हटा दिया जाएगा।
।हटाना()
.Remove () विधि सभी पाठ और चाइल्ड नोड्स सहित चयनित तत्वों को हटा देती है। यह विधि चयनित तत्वों के डेटा और घटनाओं को भी हटा देती है।
ध्यान दें
.Remove () का उपयोग करें जब आप तत्व को स्वयं निकालना चाहते हैं, साथ ही इसके अंदर सब कुछ भी। इसके अलावा, तत्वों से जुड़े सभी बाध्य इवेंट और jQuery डेटा हटा दिए जाते हैं।
उदाहरण
निम्नलिखित HTML पर विचार करें:
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>इसके परिणामस्वरूप <div>हटाए गए तत्व के साथ एक DOM संरचना होगी :
<div class="content">
<div class="goodevening">good evening</div>
</divअगर हमारे अंदर किसी भी प्रकार के नेस्टेड तत्व होते हैं <div class="hai">, तो उन्हें भी हटा दिया जाएगा। अन्य jQuery के निर्माण, जैसे डेटा या ईवेंट हैंडलर, को भी मिटा दिया जाता है।
.detach ()
.Detach () विधि सभी पाठ और चाइल्ड नोड्स सहित चयनित तत्वों को हटा देती है। हालांकि, यह डेटा और घटनाओं को रखता है। यह विधि हटाए गए तत्वों की एक प्रति भी रखती है, जो उन्हें बाद के समय में पुनर्व्याख्या करने की अनुमति देती है।
ध्यान दें
हटाए गए तत्वों को बाद के समय में DOM में प्रबलित किया जाना है। .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-jquot_in.html
<!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>
detach, stackoverflow.com/questions/12058896/…