JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<ul>
    <li class="msg">
        <span class="content">
            <p>Some text</p>
            <button class="kill">Delete</button>
        </span>
        <span class="confirm">
            <p>are you sure</p>
            <button>yes</button>
        </span>
    </li>
</ul>

CSS

.confirm, .msg_kill .content{
display: none;
}

.msg_kill .confirm{
display:block;
}

JavaScript

//Problem code

var msgKill = document.getElementsByClassName('kill'),
    msgDel = document.getElementsByClassName('msg_kill'),
    msg = document.getElementsByClassName('msg');


for (var i=0; i < msgKill.length; i++){
    msgKill[i].onclick = function(){
        msg[0].className = "msg_kill";
        delay(3000);
}}

var del = function(){
    for (var i=0; i < msgDel.length; i++){
    msgDel[i].style.display = "none";
    }
};

var delay = function(time){
    setTimeout('del()',time);
}

    
for (var i=0; i<msgDel.length; i++){
    msgDel[i].onmouseover = function(){
        clearTimeout(delay);
        console.log("clear");
    };
    msgDel[i].onmouseout = function(){
        delay(3000);
        console.log("set");
    };
}


//this snippet I use for other elements so it's justified

var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            elm = elm || document;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                returnElements = [],
                current;
            for(var i=0, il=elements.length; i<il; i+=1){
                current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                returnElements = [],
              ...