削除ボタンに機能を追加する

Question

削除アイコンが押されると、ブートストラップリストから要素を削除します。 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*/                
     }                   

Answer 2

削除ボタンは、リスト項目内にある場合：それを削除し、その親LI項目を見つけるために、上向きにDOMを検索し削除ボタンにイベントリスナーを追加します。

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