JSFiddle - React, Tailwind, and code Playground

HTML

<input id='deleter' type='button' value='Delete Tag' />

<p id='text'>
<span class="A">I am </span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>
<script>
    document.body.onmousedown = registerStartSelection;
    //document.body.onmouseup = registerEndSelection;
</script>

CSS

#text span {
    font-weight: bold;
}

JavaScript

var text = function () {
    if (window.getSelection)
        return window.getSelection();
    if (document.getSelection)
        return document.getSelection();
    if (document.selection)
        return document.selection.createRange().text;
    return "";
};

var delete_Tag = function  () {
    var textEl = document.getElementById('text');
    if (!textEl.initialTarget)
        return;

    var txt =  text();
    if (!txt || textEl.innerHTML.indexOf(txt) < 0) {
        delete textEl.initialTarget;
        return;
    }
    var node = textEl.initialTarget;
    var inner = node.innerHTML;
    var nextNode = node.nextSibling;
    delete textEl.initialTarget;
    textEl.removeChild(node);
    var textNode = document.createTextNode(inner);
    if (nextNode)
        textEl.insertBefore(textNode, nextNode);
    else 
        textEl.appendChild(textNode);
};

var registerStartSelection = function(e) {
    var textEl = document.getElementById('text');
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.id == 'deleter')
        delete_Tag();
    else if (target.parentNode != textEl) {
        delete textEl.initialTarget;
        delete textEl.selectedTarget;
    }
    else
        textEl.initialTarget = target;
};