Javascript 取消高亮显示所选文本

我有下面的代码来突出显示用户给出的所有单词

 function highlightWord(root, word) {
     textNodesUnder(root).forEach(highlightWords);

     function textNodesUnder(root) {
         var walk = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false),
             text = [],
             node;
         while (node = walk.nextNode()) text.push(node);
         return text;
     }

     function highlightWords(n) {
         for (var i;
             (i = n.nodeValue.indexOf(word, i)) > -1; n = after) {
             var after = n.splitText(i + word.length);
             var highlighted = n.splitText(i);
             var span = document.createElement('span');
             span.className = "spanClass";
             span.style.backgroundColor = "red";
             span.appendChild(highlighted);
             after.parentNode.insertBefore(span, after);
         }
     }
 }

---

当我点击部分单词时，如何取消所有单词的高亮显示？我是编程新手。非常感谢您提供的任何帮助

如果您所有突出显示的单词都使用相同类型的元素包装，您只需删除所有创建突出显示效果的跨距。您是否可以更改

节点的样式，而不是插入
跨距
？然后，您可以将
node.style.backgroundColor=''设置为unhighlight
@Lix是的，我使用GetElementsByCassName获取了所有元素。然后我获取了父节点作为
p=element.parentNode
。然后我将其作为
p.removechild（element）
从dom中删除。但它也从页面中删除了内容。有解决方案吗？