TheMathNoob TheMathNoob - 1 month ago 6
CSS Question

Giving functionality to a remove button

I want to delete an element from a bootstrap list once the remove icon is pressed. The add function add the string and the remove icon on the list. I am planning to iterate over the list and check if the remove button was clicked and if it was clicked, delete. The problem is that I don't know how to acess the elements of the object ul.

var ul = document.getElementById("list");


function isBlank(str) {
return (!str || /^\s*$/.test(str));
}

function add()
{
if(!isBlank(document.getElementById("task").value)) {
var onClick=document.createElement('div');
onClick.clasName="onclick";
var iCon = document.createElement('div');
var li = document.createElement("il");
var closeSpan = document.createElement("span");
iCon.className = "glyphicon glyphicon-remove";
onClick.appendChild(iCon);
closeSpan.setAttribute("class", "badge");
closeSpan.appendChild(onClick);
li.innerHTML = document.getElementById('task').value;
li.setAttribute("class", "list-group-item");
li.appendChild(closeSpan);
ul.appendChild(li);
}
}

function remove()
{
for(var i=0; i<ul.maxlength();i++)
{
if(ul[i].child().child().onclick==true)
{
alert("click x");
}
}
}

remove();






</script>


function add()
{
if(!isBlank(document.getElementById("task").value)) {


var iCon = document.createElement('div');
var li = document.createElement("il");
var closeSpan = document.createElement("span");
iCon.className = "glyphicon glyphicon-remove";
iCon.addEventListener("onclick",remove());
closeSpan.setAttribute("class", "badge");
closeSpan.appendChild(iCon);
li.innerHTML = document.getElementById('task').value;
li.setAttribute("class", "list-group-item");
li.appendChild(closeSpan);
ul.appendChild(li);
}
}

Answer

You can make use of this keyword and Onclick Event.

Check Out this Link

var ul = document.getElementById("list");   

        function isBlank(str) {                                                  
            return (!str || /^\s*$/.test(str));                                  
        }                                                                        

       function add()                                                        
       {                                                                     
        if(!isBlank(document.getElementById("task").value)) {             


            var iCon = document.createElement('div');                     
            var li = document.createElement("il");                        
            var closeSpan = document.createElement("span");               
            iCon.className = "glyphicon glyphicon-remove";                
            iCon.addEventListener("onclick",remove(this));                    
            closeSpan.setAttribute("class", "badge");                     
            closeSpan.appendChild(iCon);                                  
            li.innerHTML = document.getElementById('task').value;         
            li.setAttribute("class", "list-group-item");                  
            li.appendChild(closeSpan);                                    
            ul.appendChild(li);                                           
           }                                                                 
        }                                                                     

        function remove(_this)                                                        
        {                                                                        
            /*Use _this to access the element you just clicked and remove elements you need to remove*/                                                               
        }