Menu
The <del> tag in HTML stands for delete and is used to mark a portion of text which has been deleted from the document. The deleted text is rendered as strike-through text by the web browsers although this property can be changed using CSS text-decoration property. The <del> tag requires a starting and ending tag.
innerHTML property innerHTML property will get or set the HTML markup contained within the element. But you can utilize this property to “remove” any elements within the container, by setting the value to an empty string. This property is fully cross-browser, read full docs on innerHTML.
The Element property innerHTML gets or sets the HTML or XML markup contained within the element. To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .
$('b').contents().unwrap();
This selects all <b> elements, then uses .contents() to target the text content of the <b>, then .unwrap() to remove its parent <b> element.
For the greatest performance, always go native:
var b = document.getElementsByTagName('b');
while(b.length) {
var parent = b[ 0 ].parentNode;
while( b[ 0 ].firstChild ) {
parent.insertBefore( b[ 0 ].firstChild, b[ 0 ] );
}
parent.removeChild( b[ 0 ] );
}
This will be much faster than any jQuery solution provided here.
You can also use .replaceWith(), like this:
$("b").replaceWith(function() { return $(this).contents(); });
Or if you know it's just a string:
$("b").replaceWith(function() { return this.innerHTML; });
This can make a big difference if you're unwrapping a lot of elements since either approach above is significantly faster than the cost of .unwrap().
The simplest way to remove inner html elements and return only text would the JQuery .text() function.
Example:
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 Demo
Behold, for the simplest answer is mind blowing:
Here is to do it with javascript even without jQuery
element.outerHTML = element.innerHTML
with jQuery
var element = $('b')[0];
element.outerHTML = element.innerHTML;
or without jQuery
var element = document.querySelector('b');
element.outerHTML = element.innerHTML
If you want it as a function:
function unwrap(selector) {
var nodelist = document.querySelectorAll(selector);
Array.prototype.forEach.call(nodelist, function(item,i){
item.outerHTML = item.innerHTML; // or item.innerText if you want to remove all inner html tags
})
}
unwrap('b')
This should work in all major browser including old IE.
If you get NoModificationAllowedError or DOMException, it means the element has no parent. Usually you get this when you're trying this answer by creating a new node from javascript console without putting it as other element's child. But don't worry and remember that any element in the document is at least has one parent (<html></html> element)
NOTE:
this rewrite the innerHTML, so if you have a variable referencing to the inner element, it will not point to the same element.
If you need to keep the reference of some of the inner elements in your coding, you can use the jQuery (top answer) which move the elements to the expected position without rewriting the element.
How about this?
$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));
The first line copies the HTML contents of the b tag to the location directly after the b tag, and then the second line removes the b tag from the DOM, leaving only its copied contents.
I normally wrap this into a function to make it easier to use:
function removeElementTags(element) {
element.insertAdjacentHTML("afterend",element.innerHTML);
element.parentNode.removeChild(element);
}
All of the code is actually pure Javascript, the only JQuery being used is that to select the element to target (the b tag in the first example). The function is just pure JS :D
Also look at:
// 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();
}
}
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With