upwrap HTML of selected text using vanilla Javascript -

i developing wysiwyg editor , unable remove html added due previous actions.

to reproduce problem: select text , bold it. try un-bold it. able remove class not wrapping <span>. [i have logged html in console on every click event.]

here tried:

        range = sel.getrangeat(0);         range.deletecontents();         range.insertnode(document.createtextnode(selectedtext)); 

however, doesnt remove wrapping html.

var isopera = !!window.opera || navigator.useragent.indexof(' opr/') >= 0;  // opera 8.0+ (ua detection detect blink/v8-powered opera)  var isfirefox = typeof installtrigger !== 'undefined';   // firefox 1.0+  var issafari = object.prototype.tostring.call(window.htmlelement).indexof('constructor') > 0;  // @ least safari 3+: "[object htmlelementconstructor]"  var ischrome = !!window.chrome && !isopera;              // chrome 1+  var isie = /*@cc_on!@*/false || !!document.documentmode; // @ least ie6    function replaceselectedtext(classname) {      var selectedtext, sel, range;      if (window.getselection) {          sel = window.getselection();          selectedtext = window.getselection().tostring();                  console.log(selectedtext);          // check if selection has class          if(ischrome){              if(sel.basenode.parentelement.classname && sel.rangecount){                  console.log("ischrome classname:" + sel.basenode.parentelement.classname);                  sel.basenode.parentelement.classname = "";                                    range = sel.getrangeat(0);                  range.deletecontents();  // doesnt delete wrapping html                  range.insertnode(document.createtextnode(selectedtext));                                    return false;              }          }                    if(isfirefox){              if(sel.anchornode.nextelementsibling.classname){                  console.log("isfirefox classname:" + sel.anchornode.nextelementsibling.classname);                  sel.anchornode.nextelementsibling.classname = "";                  return false;              }          }                              //console.log(selectedtext);          if (sel.rangecount) {              range = sel.getrangeat(0);              range.deletecontents();              var element = document.createelement('span');              element.classname = classname;              element.textcontent = selectedtext;              range.insertnode(element);          }      } else if (document.selection && document.selection.createrange) {          range = document.selection.createrange();          range.text = replacementtext;      }  }    var toolbarbuttons = document.queryselectorall("#toolbar button");  //console.log(toolbarbuttons);  (var = 0; < toolbarbuttons.length; ++i) {      toolbarbuttons[i].addeventlistener('click', function(){          replaceselectedtext(this.id);          console.log(document.getelementbyid("editable").innerhtml);      });  }

#editable{      border: 1px solid #000000;      margin-top: 20px;      height: 50px;      font-family: arial;  }    .bold{      font-weight: bold;  }    .italic{      font-style: italic;  }

<div id="toolbar">      <button id="bold">bold</button>      <button id="italic">italic</button>  </div>    <div id="editable" contenteditable="true">      <div>lorem ipsum lorem ipsum</div>  </div>

how fix this?

i fixed filtering out <span> no classname using regex when user submits form.

sourcehtml = sourcehtml.replace(/\<span class=""\>([a-za-z0-9\s]+)\<\/span\>/g, "$1");