Autocomplete

addcross();

function addcross(){
    // console.log(cross.innerHTML);
    
    let lists=document.querySelectorAll(".works ul li");
    //console.log(lists);
    for(let i=0;i< lists.length;i++){
        let cross=document.createElement("span");
        let txt=document.createTextNode("\u00D7");
        cross.appendChild(txt);
        lists[i].appendChild(cross);
        
        
        
    }

    //console.log(lists);
}


function addList(){

    if(document.getElementById("add").value==""){
        return false;
    }
    let li=document.createElement("LI");
    li.innerHTML=document.getElementById("add").value;
    document.querySelector(".works ul").appendChild(li);
    document.getElementById("add").value="";
    //console.log(li);


    //addd cross to the last li Element
    let last=document.querySelectorAll(".works ul li");
    let cross=document.createElement("span");
    let txt=document.createTextNode("\u00D7");
    cross.appendChild(txt);
    last[last.length-1].appendChild(cross);

}


let list=document.querySelector(".works ul");

list.addEventListener( "click", event=>{
    //console.log(event.target.className);
    if(event.target.tagName=="LI"){
        event.target.classList.toggle("checked");
        //console.log(event.classList);
    }

    //console.log(event.target.tagName);
    if(event.target.tagName=="SPAN"){
        event.target.parentElement.style.display='none';
        //console.log(event.target.parentElement);

    }

})