Question

为删除按钮提供功能

2016-10-20

112

javascript html css

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

查看此链接

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

Answer 2

如果删除按钮在列表项中：在删除按钮上添加一个事件监听器，该事件监听器向上搜索 dom 以找到其父 LI 项，然后将其删除。

Answer 3

设置列表项和按钮的属性“id”。请检查以下代码。

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