কীভাবে জাভাস্ক্রিপ্টে কেবলমাত্র মূল উপাদানগুলি এবং তার সন্তানের উপাদানগুলি সরিয়ে ফেলা যায়?

Question 1

চল বলি:

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

এটি:

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

আমি Moolools, jQuery এবং এমনকি (কাঁচা) জাভাস্ক্রিপ্ট ব্যবহার করে সন্ধান করছি, তবে কীভাবে এটি করতে হয় তার ধারণা পেতে পারি নি।

Question 2

JQuery ব্যবহার করে আপনি এটি করতে পারেন:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

ডকুমেন্টেশনের দ্রুত লিঙ্কগুলি:

বিষয়বস্তু (): jQuery
replaceWith ( বিষয়বস্তু : [ স্ট্রিং | উপাদান | jQuery এর ]): jQuery এর

Question 3

লাইব্রেরি-স্বতন্ত্র পদ্ধতিটি হ'ল এটির সমস্ত শিশু নোডগুলি নিজের আগে সরিয়ে ফেলা হবে (যা স্পষ্টভাবে তাদের পুরানো অবস্থান থেকে সরিয়ে দেয়), আপনি এটি অপসারণের আগে:

while (nodeToBeRemoved.firstChild)
{
    nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,
                                            nodeToBeRemoved);
}

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

এটি সমস্ত শিশু নোডকে সঠিক ক্রমে সঠিক জায়গায় নিয়ে যাবে।

Question 4

ইভেন্ট হ্যান্ডলারের মতো জিনিসগুলি সংরক্ষণ করার জন্য, আপনাকে innerHTMLডিওএমের সাথে এটি নিশ্চিত করা উচিত, (এবং জে কে দ্বারা প্রদত্ত জিকুয়েরি সমাধানটি ব্যবহার করা না হলে, এটি innerHTMLঅভ্যন্তরীণভাবে ব্যবহারের পরিবর্তে ডোম নোডগুলি সরিয়ে নিয়েছে তা নিশ্চিত করুন )।

আমার উত্তরটি অনেকটা ইনসিনের মতো, তবে বৃহত কাঠামোর জন্য আরও ভাল সম্পাদন করবে (প্রতিটি নোড আলাদাভাবে যুক্ত করা পুনরায় আঁকার উপর কর দিতে পারে যেখানে প্রতিটি জন্য সিএসএস পুনরায় প্রয়োগ করতে হবে appendChild; ক সঙ্গে DocumentFragment, এটি কেবল একবার দেখা যায় কারণ এটি এর পরে দেখা না হয়ে থাকে) শিশুরা সমস্ত সংযুক্ত থাকে এবং এটি নথিতে যুক্ত হয়)।

var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);

Question 5

 $('.remove-just-this > *').unwrap()

Question 6

আরও মার্জিত উপায় হয়

$('.remove-just-this').contents().unwrap();

Question 7

আধুনিক জেএস ব্যবহার করুন!

const node = document.getElementsByClassName('.remove-just-this')[0];
node.replaceWith(...node.childNodes); // or node.children, if you don't want textNodes

oldNode.replaceWith(newNode) বৈধ ES5

...array হ'ল স্প্রেড অপারেটর, প্রতিটি অ্যারে উপাদানকে প্যারামিটার হিসাবে পাস করে

Question 8

আপনি যে কোনও লাইব্রেরি ব্যবহার করছেন তা ডিওএম থেকে বাইরের ডিভ অপসারণ করার আগে আপনাকে অভ্যন্তরীণ ডিভটি ক্লোন করতে হবে। তারপরে আপনাকে ডিওএমের যেখানে বাইরের ডিভ ছিল সেখানে ক্লোনযুক্ত অভ্যন্তরীণ ডিভ যুক্ত করতে হবে। সুতরাং পদক্ষেপগুলি হ'ল:

একটি ভেরিয়েবলে বাইরের ডিভের পিতামাতার একটি রেফারেন্স সংরক্ষণ করুন
অভ্যন্তরীণ ডিভটি অন্য ভেরিয়েবলে অনুলিপি করুন। innerHTMLঅভ্যন্তরীণ ডিভের পরিবর্তনশীলটিতে সংরক্ষণ করে দ্রুত এবং নোংরা উপায়ে এটি করা যেতে পারে বা আপনি নোড দ্বারা অভ্যন্তরীণ গাছকে পুনরাবৃত্তভাবে নোডের অনুলিপি করতে পারেন।
removeChildআর্গুমেন্ট হিসাবে বাহ্যিক ডিভের পিতামাতাকে বহিরাগত ডিভের সাথে কল করুন।
অনুলিপি করা অভ্যন্তরীণ সামগ্রীটি সঠিক অবস্থানটিতে বাইরের ডিভের পিতামাতার কাছে .োকান।

কিছু লাইব্রেরি আপনার জন্য কিছু বা এগুলি কিছু করবে তবে উপরের মতো কিছু হুডের নীচে চলবে।

Question 9

এবং, যেহেতু আপনি মোটোলগুলিতেও চেষ্টা করেছেন, তাই এখানে মটুলগুলির সমাধান।

var children = $('remove-just-this').getChildren();
children.replaces($('remove-just-this');

এটি সম্পূর্ণরূপে অনির্ধারিত নোট করুন, তবে আমি এর আগে মটুলগুলির সাথে কাজ করেছি এবং এটি কাজ করা উচিত।

http://mootools.net/docs/Element/Element#Element:getChildren

http://mootools.net/docs/Element/Element#Element:rereces

Question 10

ডিভকে এর বিষয়বস্তুগুলির সাথে প্রতিস্থাপন করুন:

const wrapper = document.querySelector('.remove-just-this');
wrapper.outerHTML = wrapper.innerHTML;

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

স্নিপেট প্রসারিত করুন

Question 11

আপনি যদি পায়জামাতে এই একই জিনিসটি করতে চান তবে এটি এখানে কীভাবে হয়। এটি দুর্দান্ত কাজ করে (চোখের পলকের জন্য আপনাকে ধন্যবাদ)। আমি একটি উপযুক্ত সমৃদ্ধ পাঠ্য সম্পাদক তৈরি করতে সক্ষম হয়েছি যা গণ্ডগোল না করেই সঠিকভাবে স্টাইল করে, এর জন্য ধন্যবাদ।

def remove_node(doc, element):
    """ removes a specific node, adding its children in its place
    """
    fragment = doc.createDocumentFragment()
    while element.firstChild:
        fragment.appendChild(element.firstChild)

    parent = element.parentNode
    parent.insertBefore(fragment, element)
    parent.removeChild(element)

Question 12

একটি গুরুত্বপূর্ণ ডিওএম-তে কাজ করার সময় আমি সেরা উত্তর পারফরম্যান্স অনুযায়ী সন্ধান করছি ।

চোখের পলকবিহীনতার উত্তরটি দেখিয়েছিল যে জাভাস্ক্রিপ্ট ব্যবহার করা পারফরম্যান্সটি সেরা হবে।

অপসারণের জন্য আমি বিভাগের মধ্যে একটি জটিল ডিওএম রচনা সহ 5000 লাইন এবং 400,000 অক্ষরগুলিতে নিম্নলিখিত পরীক্ষার সময় পরীক্ষা করেছি। আমি জাভাস্ক্রিপ্ট ব্যবহার করার সময় সুবিধাজনক কারণে ক্লাসের পরিবর্তে একটি আইডি ব্যবহার করছি।

Un .wwrap () ব্যবহার করে

$('#remove-just-this').contents().unwrap();

201.237ms

Re .replaceWith () ব্যবহার করে

var cnt = $("#remove-just-this").contents();
$("#remove-just-this").replaceWith(cnt);

156.983ms

জাভাস্ক্রিপ্টে ডকুমেন্টফ্রেগমেন্ট ব্যবহার করা

var element = document.getElementById('remove-just-this');
var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);

147.211ms

উপসংহার

পারফরম্যান্স-ভিত্তিক, এমনকি তুলনামূলকভাবে বড় ডিওএম কাঠামোতেও, jQuery এবং জাভাস্ক্রিপ্ট ব্যবহারের মধ্যে পার্থক্য বিশাল নয়। আশ্চর্যজনকভাবে $.unwrap()সবচেয়ে ব্যয়বহুল $.replaceWith()। পরীক্ষাগুলি jQuery 1.12.4 দিয়ে সম্পন্ন হয়েছে।

Question 13

আপনি যদি একাধিক সারি নিয়ে কাজ করে থাকেন তবে এটি আমার ব্যবহারের ক্ষেত্রে যেমন ছিল আপনি সম্ভবত এই রেখাগুলির সাথে কিছু ভাল রাখবেন:

 $(".card_row").each(function(){
        var cnt = $(this).contents();
        $(this).replaceWith(cnt);
    });