Unbold function for contenteditable

Question

I am working on a contenteditable editor (in a div element).

In that, I am making a function for making the selected element bold. Till now this is my approach:

 sselection= window.getSelection();

console.log(sselection.getRangeAt(0).commonAncestorContainer.tagName);
    if ((sselection!=="" || sselection.isCollapsed!==undefined || sselection.isCollapsed=="false") && sselection.getRangeAt(0).commonAncestorContainer.tagName!="B" && WhereNodeBelongs()==true && window.getComputedStyle(sselection.anchorNode.parentNode)["font-weight"]!="700") {
        if (sselection.rangeCount) {
            range = sselection.getRangeAt(0);
            toReplace = range.commonAncestorContainer;
            var newNode = document.createElement("b");
            newNode.appendChild(document.createTextNode(sselection.toString()));
            range.deleteContents();
            range.insertNode(newNode);
            saveState();
        }
    } else if (window.getComputedStyle(window.getSelection().anchorNode.parentNode)["font-weight"]=="700") {
        window.getSelection().anchorNode.parentNode.style.fontWeight= "400";
    }

}

The code which makes the text bold is working alright. However the code that makes a bold element unbold seems to have a problem. After I unbold the selection, the innerHTML is like this:

<b style="font-weight: 400;"><b>element called nothing</b></b>

How can I make it so that it becomes like this:

element called nothing

Also the bold elements can have other styles like italic, underline, etc. How can I make it such that the unbold function only removes the bold in a clean format, and nothing else?