Remove a HTML tag but keep the innerHtml

Question

I have some simple HTML which I need to strip simple formatting   A nice house was found in  lt b gt Toronto lt  b gt     I need to remove the bold  but leave the sentence intact   How is this possible in jQuery

User · Answer

Another native solution  in coffee    el   document getElementsByTagName  b   docFrag   document createDocumentFragment   docFrag appendChild el firstChild while el childNodes length  el parentNode replaceChild docFrag  el   I don t know if it s faster than user113716 s solution  but it might be easier to understand for some

User · Answer

Behold  for the simplest answer is mind blowing  outerHTML is supported down to Internet Explorer 4   Here is to do it with javascript even without jQuery element outerHTML   element innerHTML  with jQuery element      b   0   or without jQuery element   document querySelector  b    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  in recent browser  we can even call forEach right on the nodelist  function unwrap selector        document querySelectorAll  b   forEach   item i    gt            item outerHTML   item innerText

User · Answer

b   contents   unwrap      This selects all  lt b gt  elements  then uses  contents   to target the text content of the  lt b gt   then  unwrap   to remove its parent  lt b gt  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

User · Answer

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    https   developer mozilla org en-US docs Web API Element insertAdjacentHTML

User · Answer

The simplest way to remove inner html elements and return only text would the JQuery  text   function   Example   var text       lt p gt A nice house was found in  lt b gt Toronto lt  b gt  lt  p gt      alert  text html        Outputs A nice house was found in  lt b gt Toronto lt  b gt   alert  text text          Outputs A nice house was found in Toronto   jsFiddle Demo

User · Answer

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    gt      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    gt      if  el parentElement        if  el childNodes length          const range   document createRange          range selectNodeContents el         el replaceWith range extractContents           else         el remove

User · Answer

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

[jquery] Remove a HTML tag but keep the innerHtml

Examples related to jquery