জেকুয়েরি detach() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
detach() মেথড নির্বাচিত এলিমেন্টের টেক্সট এবং চাইল্ড নোট রিমুভ করে। কিন্তু, এটি ডেটা এবং ইভেন্ট সংরক্ষন করে।
এই মেথড রিমোভ করা এলিমেন্টের একটি কপি সংরক্ষন করে, যা তাদের পরবর্তী সময়ে পূন:অন্তর্ভূক্ত করতে অনুমতি দেয়।
পরামর্শঃ এলিমেন্ট এবং এর ডাটা ও ইভেন্ট রিমুভ করতে, remove() মেথড ব্যবহার করুন।
পরামর্শঃ নির্বাচিত এলিমেন্টের শুধুমাত্র কন্টেন্ট রিমুভ করতে, empty() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).detach()
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<button>সকল p এলিমেন্ট রিমুভ করুন</button>
</body>
</html>
ফলাফল
উদাহরণ
একটি এলিমেন্ট রিমুভ এবং পুনরুদ্ধার করা
একটি এলিমেন্ট রিমুভ এবং পুনরুদ্ধার করতে কিভাবে detach() মেথড ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x;
$("#test1").click(function(){
x = $("p").detach();
});
$("#test2").click(function(){
$("body").prepend(x);
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button id="test1">p এলিমেন্ট রিমুভ করুন</button>
<button id="test2">p এলিমেন্ট রিস্টোর করুন</button>
</body>
</html>
ফলাফল
detach() এবং remove() এর মধ্যে পার্থক্য
detach() এবং remove() এর মধ্যে পার্থক্য দেখানো হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test1").click(function(){
$("body").append($("#p1").detach());
});
$("#test2").click(function(){
$("body").append($("#p2").remove());
});
$("p").click(function(){
$(this).animate({fontSize: "+=1px"})
});
});
</script>
</head>
<body>
<p id="p1">মুভ হওয়ার পরে প্যারাগ্রাফটি ক্লিক করুন - ক্লিক ইভেন্ট এখনো কাজ করবে।</p>
<p id="p2">মুভ হওয়ার পরে প্যারাগ্রাফটি ক্লিক করুন - ক্লিক ইভেন্ট এখনো কাজ করবে না।</p>
<button id="test1">p এলিমেন্ট যুক্ত করে এবং বিছিন্ন করে</button>
<button id="test2">p এলিমেন্ট যুক্ত করে এবং রিমুভ করে</button>
</body>
</html>
ফলাফল