Remove element and insert its text into parent element in the same place with jQuery

Question

I am writing a script to copy the content of an element to the parent element, and delete the element. The element and the parent element have the same class. For example:

Before the script runs:

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

After:

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

Below is my code. The text of element which is inside ("Copied") ends up on the end of line, not between "Some" and "Text". How can I fix it?

---

 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

Instead of removing the original <span> in its entirety, you can use contents() and unwrap() to strip the opening and closing tags.

Using this method, the $.each and if are unnecessary.

 $('.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

See .replaceWith() method 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 3

Try jQuery replaceWith

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

a.replaceWith(a.text());

replaceWith will replace each element in the set of matched elements with the provided new content and return the set of elements that was removed

EXAMPLE FIDDLE

Answer 4

All of these answers use jQuery. Here's one with only native JS. Use

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

Here is a fully functional recursive example that filters out duplicate classes in the child.

 /** * @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> 

Please note that, since strings are immutable in JavaScript, reseting the innerHTML will replace any child elements with new ones, which may interfere with DOM access.

Answer 5

just change the method html(), which will return the HTML code, use text() which will basically return the similar to element.innerText in Vanilla

 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> 

 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>