JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>
  <span id='test' class='button'>Клик</span>
</div>

CSS

.button {
  box-sizing: border-box;
    font-size: 16px;
    line-height: 24px;
    max-height: 36px;
    display: inline;
    color: rgba(0, 0, 0, 0.8);
    background: rgba(255, 255, 255, 0.8);
    border: 4px black dotted;
    padding: 6px 16px;
    margin: 8px 8px 0 0;
    cursor: pointer;
}

JavaScript

const movieName = document.getElementById('test');
let timer;

movieName.addEventListener('click', function singleClick(){
        if(!timer){
            timer = setTimeout(() => {
                alert('hi');
            }, 500);
        }
    });

movieName.addEventListener('dblclick', function doubleClick(){
        clearTimeout(timer);
        document.querySelector('.wrapper').removeChild(movieName);
        movieName.removeEventListener('dblclick', doubleClick);
});