Reputation: 317

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);                                           
        }                                                                 
    }                                                                     

   function remove(argument)        
{                                
    ul.removeChild(ul.argument); 

}

Upvotes: 0

Answers (3)

Kumar_Vikas

Reputation: 845

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*/                                                               
        }

Upvotes: 1

Sanusha Balan

Reputation: 1

Set attribute 'id' for list item and button. Please check following code.

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

var lastId=0;

function add()
{
  var entry = document.createElement('li');
  entry.setAttribute('id','item'+lastid);
  var button=document.createElement("button"); 
  button.setAttribute('onClick','remove("'+'item'+lastid+'")'); 
  entry.appendChild(button); 
  lastid+=1;
  ul.appendChild(entry); 
}        

function remove(itemid){
 var item = document.getElementById(itemid);
 ul.removeChild(item);
}

Upvotes: 0

Davy

Reputation: 6441

If the remove button is in the list item: add an event listener on the remove button that searches the dom upwards to find its parent LI item, then remove it.

Upvotes: 0

Giving functionality to a remove button

Answers (3)

Related Questions