How to remove Highlight () from a paragraph using Javascript

I have HTML where some paragraphs contain <mark> elements. This causes the text within the <mark> element to be highlighted. Essentially, I want to remove the highlight by removing the <mark> element but keeping the textContent.

What’s the best way to do this?

Here’s an example paragraph:

I want to remove the highlighted text. The HTML contains <span> and other elements and some <mark> elements that I don’t want removed. The ones I want removed have a class of .show-mark. I know how to find just the <mark> elements that I want to remove but I don’t know how to remove them.

Here’s the HTML for the example paragraph:

<p id="p85" class="cmiTranPara note-style-bookmark note-style-bookmark-start note-style-bookmark-end">
<i class="playmark play icon"></i>
<i class="timing large circular red clock icon"></i>
<span class="pnum has-annotation" data-aid="1574791210024">(p85)&nbsp;</span>
Miracle-mindedness is still a stage of perception just short of
<mark class="show-mark">master</mark>y. For 
<mark class="show-mark">master</mark>y comes when you know that you are literally and deliberately creating. And there is nothing miraculous about it. You will decree a thing and it shall be so!
</p>

Thanks for your help.

Answer

Try something like this

targets = document.querySelectorAll("mark");
for (let target of targets) {  
  target.outerHTML=target.innerHTML;
}

and see if it works.