javascript - 为删除按钮提供功能

Question

我想在按下删除图标后从 Bootstrap 列表中删除一个元素。 add 函数在列表中添加字符串和删除图标。我打算遍历列表并检查是否单击了删除按钮，如果单击了，则删除。问题是我不知道如何访问对象 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); 

}                                           

Answer 1

您可以使用this 关键字和Onclick 事件。

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