JSFiddle - React, Tailwind, and code Playground

by leotwot

HTML

<input type="text" id="textbox" placeholder="Xin mời nhập">

<button id="btn" onclick="eventOfButton(inputClear)">Thêm</button>
<div id="ad"></div>
<script> 
    
    var bodyTag;
    var divArray;
    function inputClear(){ 
        document.getElementById('textbox').value = "";
    }
    function eventOfButton(inputClear){
        var textBValue = document.getElementById('textbox').value;
        
        var divTotal = document.createElement('DIV');
        divTotal.className = "Total";
        var listDv = document.getElementsByClassName('Total');
        divArray = listDv;
        var divShow = document.createElement('DIV');
        var showContent = document.createTextNode(textBValue);
        divShow.appendChild(showContent);

        var closeDiv = document.createElement('BUTTON');
        closeDiv.className = 'dlt';
        var listClsDv = document.getElementsByClassName('dlt');
        
        var closeBtn = document.createTextNode("Xóa");
        closeDiv.appendChild(closeBtn);

        divTotal.appendChild(divShow);
        divTotal.appendChild(closeDiv);
        var divad = document.getElementById('ad');
        bodyTag = divad;
        divad.appendChild(divTotal); 
        
        inputClear();

        for(var i = 0 ; i < listClsDv.length ; i++){
            listClsDv[i].onclick = function (event){
               // bodyTag.removeChild(bodyTag.childNodes[i]);
               this.parentElement.remove();
               
               
            }
        }
    }

  
</script>