How to remove parent tag name?

Question

I got duplicate html wrapper "B". I would like to remove duplicate wrap for B,I, etc.

Here is my HTML that show i got inside a element

<div ng-mouseup="mouseUpEvent(e)" ng-keyup="keyUpEvent()" contenteditable="" data-element="textBlock" id="markdown-body">

  Chicken ipsum dolor sit.<b> Pooz<b>hasellus ege</b>stas</b>,
  ipsum <i>sit amet finibus </i>pellentesque, iza house byys nget lectus. Proin pulvinar enim non mi vestibulum interdum. Sed nisl enim, sagittis non vestibulum eget, congue pellentesque
  ipsum. Nullam nec interdum elit

</div>

script I am able to locate parents tag name and child tag name

if( newNode.tagName ==  selectedContentParents.tagName){
   console.log('yep'); // this come out as true.
   console.log(typeof newNode );  // object
   console.log(typeof selectedContentParents ); // object
}

How do I remove the parent tagName B and get the content rendered. I've tried to copy the inner html of parent tag and use replaceWith but than the HTML is not rendered.

Answer 1

I really depends on the level of nesting. In other words, what if there's a <b> element inside a <b>, inside of another <b>? Or, is that not possible? That's your first step though - to figure that out.

Assuming you only want to clear like elements one level deep inside themselves, you would have to figure out which tags you want to do this to.

For each tag create an empty array, for example, bArray and iArray. Fill them with all your tagged elements using document.getElementsByTagName('b')

Then interate over the array, looking for bArray[i].getElementsByTagName('b')[0] and if found capture the innerHTML

so, you've gotta know the child index of the b so you can .createTextElement with the innerHTML and replace that child index with the text to strip the <b>.

I ain't gonna do it for free. Not today.