तत्व निकालें और jQuery

Question

के साथ उसी स्थान पर मूल तत्व में अपना टेक्स्ट डालें, मैं मूल तत्व में किसी तत्व की सामग्री की प्रतिलिपि बनाने के लिए एक स्क्रिप्ट लिख रहा हूं, और तत्व को हटा सकता हूं। तत्व और अभिभावक तत्व में एक ही कक्षा है। उदाहरण के लिए:

स्क्रिप्ट से पहले चलाता है:

<span class='SomeClass'> 
    Some 
    <span class='SomeClass'> 
     Copied 
    </span> 
    Text 
</span> 

के बाद:

<span class='SomeClass'> 
    SomeCopiedText 
</span> 

नीचे मेरी कोड है। तत्व (जो "प्रतिलिपि") के अंदर मौजूद तत्व का पाठ "कुछ" और "पाठ" के बीच नहीं, लाइन के अंत में समाप्त होता है। मेरे द्वारा यह कैसे किया जा सकता है?

---

if ($('.SomeClass > .SomeClass').length > 0) { 
 
    $('.SomeClass > .SomeClass').each(function(index, event) { 
 
    $(this).parent().append($(this).html()); 
 
    $(this).remove(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="SomeClass"> 
 
    Some 
 
    <span class="SomeClass"> 
 
    Copied 
 
    </span> 
 
    Text 
 
</span>

Answer 1

अपनी संपूर्णता में मूल <span> को दूर करने के बजाय, आप contents() और unwrap() खोलने और बंद करने टैग पट्टी करने के लिए उपयोग कर सकते हैं।

इस विधि का उपयोग करना, $.each और if अनावश्यक हैं।

$('.SomeClass > .SomeClass').contents().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="SomeClass"> 
 
    Some 
 
    <span class="SomeClass"> 
 
    Copied 
 
    </span> 
 
    Text 
 
</span> 
 

 
<br><br> 
 

 
<span class="SomeClass"> 
 
    Another 
 
    <span class="SomeClass"> 
 
    Copied 
 
    </span> 
 
    Text 
 
</span>

Answer 2

सिर्फ विधि एचटीएमएल() है, जो एचटीएमएल कोड वापस आ जाएगी बदलने के लिए, पाठ() जो मूल रूप से वेनिला

में

if ($('.SomeClass > .SomeClass').length > 0) { 
 
    $('.SomeClass > .SomeClass').each(function(index, event) { 
 
    //$(this).parent().append($(this).html()); 
 
    $(this).parent().append($(this).text()); 
 
    $(this).remove(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="SomeClass"> 
 
    Some 
 
    <span class="SomeClass"> 
 
    Copied 
 
    </span> 
 
    Text 
 
</span>

element.innerText के लिए इसी तरह वापस आ जाएगी का उपयोग

if ($('.SomeClass > .SomeClass').length > 0) { 
 
    $('.SomeClass > .SomeClass').each(function(index, event) { 
 
    $(this).parent().append($(this).text()); 
 
    $(this).remove(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="SomeClass"> 
 
    Some 
 
    <span class="SomeClass"> 
 
    Copied 
 
    </span> 
 
    Text 
 
</span>

Answer 3

प्रयास करें jQuery replaceWith

var a = $('.SomeClass > .SomeClass'); 

a.replaceWith(a.text()); 

replaceWith प्रदान की नई सामग्री के साथ मिलान तत्वों के सेट में प्रत्येक तत्व की जगह और तत्वों के सेट है कि हटा दिया गया था वापस आ जाएगी

EXAMPLE FIDDLE

Answer 4

देखें .replaceWith() विधि http://api.jquery.com/replacewith/

if ($('.SomeClass > .SomeClass').length > 0) { 
 
    $('.SomeClass > .SomeClass').replaceWith(function() { 
 
    return $(this).text() 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="SomeClass"> 
 
    Some 
 
    <span class="SomeClass"> 
 
    Copied 
 
    </span> 
 
    Text 
 
</span>

Answer 5

इन सभी उत्तर jQuery का उपयोग करें। यहां केवल मूल जेएस के साथ एक है।

parent.innerHTML = parent.innerHTML.replace(child.outerHTML, child.innerHTML); 

यहां एक पूर्ण कार्यात्मक पुनरावर्ती उदाहरण है जो बच्चे में डुप्लिकेट कक्षाओं को फ़िल्टर करता है।

/** 
 
* @function mergeHierarchy 
 
* @param {HTMLElement} parent - The root element to start merging under 
 
* @return {undefined} 
 
*/ 
 
function mergeHierarchy(parent) { 
 
    var parentClasses = parent.className.split(' '); 
 
    parentClasses.sort(); // for comparing 
 
    
 
    // only merge hierarchy if parent has any children 
 
    if (parent.children.length == 0) return; 
 
    
 
    // iterate over children 
 
    for (var i=0; i<parent.children.length; i++) { 
 
    var child = parent.children[i]; 
 
    // recurse if child has children 
 
    if (child.children.length > 0) mergeHierarchy(child); 
 
    
 
    var childClasses = child.className.split(' '); 
 
    childClasses.sort(); // for comparing 
 
    // if parent classes differ from child classes, then move onto the next child (after removing any duplicated classes) 
 
    if (childClasses.length != parentClasses.length || !childClasses.every(function(item,i) { return item === parentClasses[i];})) { 
 
     // remove duplicate classes from child (if any) 
 
     for (var c=0; c<childClasses.length; c++) { 
 
     if (parentClasses.indexOf(childClasses[c]) > -1) childClasses.splice(c, 1); 
 
     } 
 
     child.className = childClasses.join(' '); 
 
     continue; 
 
    } 
 
    // remove child from DOM and insert innerHTML into parentf 
 
    parent.innerHTML = parent.innerHTML.replace(child.outerHTML, child.innerHTML); 
 
    } 
 
} 
 

 
mergeHierarchy(document.querySelector('.SomeClass')); 
 
console.log(document.querySelector('.SomeClass').innerHTML);

.SomeClass { 
 
    color: red; 
 
} 
 
.SomeOtherClass { 
 
    font-family: monospace; 
 
}

<span class='SomeClass'> 
 
    Some 
 
    <span class='SomeClass'> 
 
     Copied 
 
     <div class='SomeClass SomeOtherClass'> 
 
      (Moved) 
 
     </div> 
 
    </span> 
 
    Text 
 
</span>

कृपया ध्यान दें कि, के बाद से तार जावास्क्रिप्ट में अडिग हैं, innerHTML reseting नए लोगों को, जो डोम का उपयोग के साथ हस्तक्षेप कर सकते हैं के साथ किसी भी बच्चे तत्वों की जगह लेगा।