删除 body 标签中的 span 标签

Question

So, I have the following html:

<p>
I wanna remove this <span class="highlight1">highlight</span> when user selects text 
and presses a button. This shouln't remove the following <span class="highlight1">highlight</span>.
</p>

When user selects text and does some action (eg pressing a button), I want that specific text to be unhighlighted. I can't figure out how to do this with vanilla JS:( I only have the following JS code to capture when the text selection is on a highlighted text:

//Assume code is within an event handler...
var text_selection = window.getSelection();

if (text_selection.anchorNode.parentNode.className === 'highlight1')
{
  //unhighlight
  console.log("unhighlight");
}

Answer 1

If the <span class="highlight1">...</span> will always only contain text and no other markup then you can "remove" the highlighting by replacing (-> .replaceWith() ) the <span> element with a text node created from the content of the <span>

span in the example would be the text_selection.anchorNode.parentNode from your pseudo code.

const textNode = document.createTextNode(span.textContent);
span.replaceWith(textNode);

Example:

 /* setTimeout so you can "see" the removal */ setTimeout(() => { document.querySelectorAll(".highlight1").forEach(span => { const textNode = document.createTextNode(span.textContent); span.replaceWith(textNode); }) }, 2000);

 .highlight1 { color: red }

 <p> I wanna remove this <span class="highlight1">highlight</span> when user selects text and presses a button. This shouln't remove the following <span class="highlight1">highlight</span>. </p>