title: How to undo the formatting of a selected text?
body: <p>I am trying to develop a simple WYSIWYG editor.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('button').addEventListener('click', () =&gt; {
    const range_of_selected_text = document.getSelection().getRangeAt(0).cloneRange();
    const TAG = document.createElement('strong');
    range_of_selected_text.surroundContents(TAG);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;B&lt;/button&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius recusandae vero quasi laborum tempore quis cum eum! Quo temporibus deserunt consequatur laborum magnam, quidem magni, quia id, nisi consequuntur dolorem.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In this case, <code>surroundContents()</code> allows displaying a selected text as bold. But how am I able to remove the <code>&lt;strong&gt;</code> tag if the text is already bold?</p>