जावास्क्रिप्ट में केवल मूल तत्व और उसके बाल तत्वों को कैसे हटाया जाए?

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>

मैं Mootools, jQuery और यहां तक कि (कच्चे) जावास्क्रिप्ट का उपयोग कर पता लगा रहा हूँ, लेकिन यह कैसे करना है विचार नहीं मिल सका।

Question 2

JQuery का उपयोग करके आप यह कर सकते हैं:

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

दस्तावेज़ के त्वरित लिंक:

सामग्री (): jQuery
प्रतिस्थापन के साथ ( सामग्री : [ स्ट्रिंग | तत्व | jQuery ]): jQuery

Question 3

लाइब्रेरी-इंडिपेंडेंट मेथड को अपने से पहले निकाले जाने वाले तत्व के सभी चाइल्ड नोड्स को सम्मिलित करना है (जो आपको उनकी पुरानी स्थिति से हटाता है), इससे पहले कि आप इसे हटा दें:

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

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

यह सभी चाइल्ड नोड्स को सही क्रम में सही जगह पर ले जाएगा।

Question 4

आपको DOM के साथ ऐसा करना सुनिश्चित करना चाहिए, नहीं innerHTML(और यदि jk द्वारा प्रदान किए गए jQuery समाधान का उपयोग कर रहे हैं, तो सुनिश्चित करें कि यह 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

आधुनिक JS का उपयोग करें!

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

जो भी पुस्तकालय आप का उपयोग कर रहे हैं उसे डोम से बाहरी div को हटाने से पहले आंतरिक div को क्लोन करना होगा। फिर आपको क्लोन किए गए आंतरिक div को DOM में उस स्थान पर जोड़ना होगा जहां बाहरी div था। तो कदम हैं:

एक चर में बाहरी div के माता-पिता के लिए एक संदर्भ सहेजें
इनर डिव को दूसरे वेरिएबल में कॉपी करें। यह त्वरित और गंदे तरीके से बचाया जा सकता हैinnerHTML आंतरिक div को एक चर में या आप नोड के साथ आंतरिक पेड़ की नकल कर सकते हैं।
removeChildतर्क के रूप में बाहरी div के साथ बाहरी div के माता-पिता को कॉल करें ।
बाहरी स्थिति में माता-पिता की कॉपी की हुई आंतरिक सामग्री को सही स्थिति में डालें।

कुछ पुस्तकालय आपके लिए इसमें से कुछ या सभी करेंगे लेकिन उपरोक्त जैसा कुछ हो रहा है।

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:replaces

Question 10

अपनी सामग्री से div को प्रतिस्थापित करें:

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

मैं एक महत्वपूर्ण DOM पर काम करते हुए सर्वश्रेष्ठ उत्तर प्रदर्शन-वार की तलाश कर रहा था ।

पलकहीनता का जवाब इस ओर इशारा कर रहा था कि जावास्क्रिप्ट का उपयोग करना सबसे अच्छा होगा।

मैंने हटाने के लिए निम्नलिखित निष्पादन समय परीक्षण 5,000 लाइनों और 400,000 वर्णों के साथ एक जटिल DOM संरचना के साथ किया है। मैं जावास्क्रिप्ट का उपयोग करते समय सुविधाजनक कारण के लिए एक वर्ग के बजाय एक आईडी का उपयोग कर रहा हूं।

$ .Unwrap () का उपयोग करना

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

201.237ms

$ .ReplaceWith () का उपयोग करना

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

156.983ms

जावास्क्रिप्ट में DocumentFragment का उपयोग करना

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

निष्कर्ष

प्रदर्शन-वार, अपेक्षाकृत बड़े DOM संरचना पर भी, jQuery और जावास्क्रिप्ट का उपयोग करने के बीच का अंतर बहुत बड़ा नहीं है। हैरानी $.unwrap()की बात है की तुलना में सबसे महंगा है $.replaceWith()। परीक्षण jQuery 1.12.4 के साथ किया गया है।

Question 13

यदि आप कई पंक्तियों के साथ काम कर रहे हैं, क्योंकि यह मेरे उपयोग के मामले में था तो आप शायद इन पंक्तियों के साथ कुछ बेहतर कर सकते हैं:

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