JSFiddle - React, Tailwind, and code Playground

HTML

<a href="delete.html?id=2" target="_blank" onclick="return confirmDelete(this);" class="delete-link need-to-confirm">
    <span class="maintext">&#10008; Delete</span>
    <span class="confirmation">&#10004; Sure?</span>
</a>

CSS

.delete-link {
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid red;
    background-color: #edbaba;
    color: red;
    text-decoration: none;
}
.delete-link:hover {
    background-color: #fff;
}
.need-to-confirm .confirmation {
    display: none;
}
.confirmed .maintext {
    display: none;
}

JavaScript

window.confirmDelete = (function (element) {
    var className = element.className;
    
    if (className.indexOf('need-to-confirm') > -1) {
        element.className = className.replace('need-to-confirm', 'confirmed');
        return false;
    } else {
        element.remove();
    }
});