উত্তর:
hide()ম্যাচ করা উপাদানগুলির সিএসএস displayসম্পত্তিকে এতে সেট করে none।
remove() ডিওএম থেকে মিলিত উপাদানগুলি সম্পূর্ণরূপে সরিয়ে দেয়।
detach()ভালো remove()লাগে তবে সঞ্চিত উপাদান এবং ইভেন্টগুলিকে ম্যাচের উপাদানগুলির সাথে সম্পর্কিত রাখে।
ডিওমে কোনও বিচ্ছিন্ন উপাদানটিকে পুনরায় সন্নিবেশ করতে, কেবলমাত্র jQueryথেকে ফিরে আসা সেটটি সন্নিবেশ করান detach():
var span = $('span').detach();
...
span.appendTo('body');removeযদি স্থিরভাবে ব্যবহার করি detachতবে উদাহরণটি এখনও কার্যকর হয়।
remove()এবং এটি আবার সংযুক্ত করুন, তবে বাইন্ডিংটি চলে যাবে এবং স্প্যানটি ক্লিক করলে কিছুই হবে না। আপনি যদি কল করে detach()এবং পুনরায় যোগাযোগ করেন, তবে বাঁধাই স্থির থাকে এবং ক্লিক হ্যান্ডলার কাজ চালিয়ে যায়।
একটি টেবিলে কাগজের টুকরোটি কল্পনা করুন যাতে কিছু পেনসিলযুক্ত নোট লেখা থাকে।
hide -> এটির উপরে একটি কাপড় ফেলে দিনempty -> একটি ইরেজার দিয়ে নোটগুলি সরানdetach -> আপনার হাতে থাকা কাগজটি ধরুন এবং ভবিষ্যতের যা কিছু পরিকল্পনা রয়েছে তা রাখুনremove -> কাগজটি ধরে ডাস্টবিনে ফেলে দিনকাগজ উপাদানটির প্রতিনিধিত্ব করে এবং নোটগুলি উপাদানটির বিষয়বস্তুগুলি (চাইল্ড নোড) উপস্থাপন করে।
কিছুটা সরলীকৃত এবং সম্পূর্ণ নির্ভুল নয়, তবে সহজেই বোঝা যায়।
hide() মিলছে না এমন উপাদানগুলির প্রদর্শনকে কোনওটিতেই সেট করে না।
detach() সমস্ত পাঠ্য এবং চাইল্ড নোড সহ মিলে যাওয়া উপাদানগুলি সরিয়ে দেয়।
এই পদ্ধতিতে উপাদানটির সাথে সম্পর্কিত সমস্ত ডেটা সংরক্ষণ করে এবং তাই উপাদানটির ডেটা পুনরুদ্ধার করতে এবং ইভেন্ট হ্যান্ডলারের সাহায্যে ব্যবহার করা যেতে পারে।
remove() সমস্ত পাঠ্য এবং চাইল্ড নোড সহ মিলযুক্ত উপাদানগুলিও সরিয়ে দেয়।
তবে, এক্ষেত্রে কেবলমাত্র উপাদানটির ডেটা পুনরুদ্ধার করা যেতে পারে, এর ইভেন্ট হ্যান্ডলাররা তা পারেন না।
JQuery এ, ডিওএম থেকে উপাদানগুলি সরানোর জন্য তিনটি পদ্ধতি রয়েছে। এই তিনটি পদ্ধতি .empty(), .remove()এবং .detach()। এই সমস্ত পদ্ধতি ডিওএম থেকে উপাদানগুলি অপসারণের জন্য ব্যবহৃত হয় তবে সেগুলি সমস্ত আলাদা।
.hide ()
মিলিত উপাদানগুলি লুকান। কোনও পরামিতি ছাড়াই, .hide () পদ্ধতিটি এইচটিএমএল উপাদানটি আড়াল করার সহজতম উপায়:
$(".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>এটি হাই টেক্সট মোছার সাথে একটি ডিওএম কাঠামোর ফলাফল করবে:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>আমাদের ভিতরে যদি অভ্যন্তরীণ কিছু সংখ্যক উপাদান থাকে তবে সেগুলিও <div class="hai">সরানো হবে।
.অপসারণ()
.Remove () পদ্ধতিটি সমস্ত পাঠ্য এবং চাইল্ড নোড সহ নির্বাচিত উপাদানগুলি সরিয়ে দেয়। এই পদ্ধতিটি নির্বাচিত উপাদানগুলির ডেটা এবং ইভেন্টগুলিও সরিয়ে দেয়।
বিঃদ্রঃ
আপনি যখন উপাদানটি নিজেই অপসারণ করতে চান তখন .reve () ব্যবহার করুন। এটি ছাড়াও, উপাদানগুলির সাথে সম্পর্কিত সমস্ত সীমাবদ্ধ ইভেন্ট এবং jQuery ডেটা সরানো হবে।
EXAMPLE টি
নিম্নলিখিত এইচটিএমএল বিবেচনা করুন:
<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/hat-is-differences-between-jquery_15.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, স্ট্যাকওভারফ্লো