jquery - tag - ট্রেস এলিমেন্ট




একটি এইচটিএমএল ট্যাগ মুছে ফেলুন কিন্তু innerHtml রাখুন (4)

অভ্যন্তরীণ এইচটিএমএল উপাদানগুলি সরানোর সবচেয়ে সহজ উপায় এবং শুধুমাত্র পাঠ্যটি ফেরত JQuery .text () ফাংশনটি ব্যবহার করবে

উদাহরণ:

var text = $('<p>A nice house was found in <b>Toronto</b></p>');

alert( text.html() );
//Outputs A nice house was found in <b>Toronto</b>

alert( text.text() );
////Outputs A nice house was found in Toronto

jsfiddle ডেমো

আমার কাছে কিছু সহজ HTML রয়েছে যা আমি সহজ বিন্যাসন বন্ধ করতে চাই।

A nice house was found in <b>Toronto</b>.

আমি সাহসী অপসারণ করতে হবে, কিন্তু বাক্য অক্ষত ছেড়ে।

কিভাবে jQuery এই সম্ভব?


আপনি .replaceWith() ব্যবহার করতে পারেন, এই মত:

$("b").replaceWith(function() { return $(this).contents(); });

অথবা যদি আপনি এটি শুধুমাত্র একটি স্ট্রিং জানি:

$("b").replaceWith(function() { return this.innerHTML; });

আপনি যদি অনেকগুলি উপাদানের .unwrap() হন তবে এটি একটি বড় পার্থক্য তৈরি করতে পারে।


কিভাবে এই সম্পর্কে?

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));

প্রথম লাইনটিতে b ট্যাগের HTML উপাদানটি সরাসরি b ট্যাগের পরে অবস্থানের অনুলিপি করে এবং তারপর দ্বিতীয় লাইন ডিওএম থেকে b ট্যাগটিকে সরিয়ে দেয়, এটি কেবল তার অনুলিপিযুক্ত সামগ্রীগুলি রেখে যায়।

আমি সাধারণত এটি ব্যবহার করা সহজ করার জন্য একটি ফাংশন মধ্যে এই মোড়ানো:

function removeElementTags(element) {
   element.insertAdjacentHTML("afterend",element.innerHTML);
   element.parentNode.removeChild(element);
}

কোডটি প্রকৃতপক্ষে বিশুদ্ধ জাভাস্ক্রিপ্ট ব্যবহার করা হয়, শুধুমাত্র JQuery ব্যবহার করা হচ্ছে তা লক্ষ্য করার জন্য উপাদানটি নির্বাচন করা (প্রথম উদাহরণটিতে b ট্যাগ)। ফাংশন শুধু বিশুদ্ধ JS: ডি

এছাড়াও দেখুন:


// For MSIE:
el.removeNode(false);

// Old js, w/o loops, using DocumentFragment:
function replaceWithContents (el) {
  if (el.parentElement) {
    if (el.childNodes.length) {
      var range = document.createRange();
      range.selectNodeContents(el);
      el.parentNode.replaceChild(range.extractContents(), el);
    } else {
      el.parentNode.removeChild(el);
    }
  }
}

// Modern es:
const replaceWithContents = (el) => {
  el.replaceWith(...el.childNodes);
};

// or just:
el.replaceWith(...el.childNodes);

// Today (2018) destructuring assignment works a little slower
// Modern es, using DocumentFragment.
// It may be faster than using ...rest
const replaceWithContents = (el) => {
  if (el.parentElement) {
    if (el.childNodes.length) {
      const range = document.createRange();
      range.selectNodeContents(el);
      el.replaceWith(range.extractContents());
    } else {
      el.remove();
    }
  }
};





jquery