無法在一次運行中刪除多個陣列元素

Question

今天我開始研究互聯網過濾器，以便家長們可以配置他們的孩子不能看幾個網站。

我正在努力解決關鍵字問題。如果我嘗試刪除所有關鍵字，它只會刪除最後製作的關鍵字。當我在控制檯中看，我沒有看到任何錯誤。我必須關閉我的分機並打開它才能刪除下一個關鍵字。我認爲它與.addEventListener（）有關，但我不確定。

這裏是我的代碼：

// Checking if this program didn't run earlier then set "keywords" 
chrome.storage.sync.get("keywords", function(result){ 
    if(result.keywords == undefined){ 
     chrome.storage.sync.set({"keywords":[]}); 
    } 
}); 

// All HTML content 
var keywordsdiv = document.getElementById("keywords"); 
var newkeyword = document.getElementById("newkeyword"); 
var addbutton = document.getElementById("add"); 
addbutton.addEventListener("click", function(){addkeyword(newkeyword.value)}); 
var keywords = []; 

// Collect all information on Chrome storage and put in in the keywords 
chrome.storage.sync.get("keywords", function(result){ 
    keywords = result.keywords; 
    keywords.forEach(_); 
    function _(keyword){ 
     keywordsdiv.innerHTML += "<div class=\"keyword\" id=\"" + keyword + "\">" + keyword + "</div>"; 
     document.getElementById(keyword).addEventListener("click", function(){removekeyword(keyword)}); 
    } 
}); 


// Remove the keyword 
function removekeyword(keyword){ 
    document.getElementById(keyword).remove(); 
    chrome.storage.sync.get("keywords", function(result){ 
     var newkeywords = result.keywords; 
     newkeywords.forEach(_); 
     var bool = false; 
     function _(_keyword, index){ 
      if(bool){ 
       newkeywords[index - 1] = _keyword; 
      } 
      if(keyword == _keyword){ 
       bool = true; 
      } 
      if(bool && index === newkeywords.length - 1){ 
       newkeywords.splice(index, 1); 
      } 
     } 
     keywords = newkeywords; 
     chrome.storage.sync.set({"keywords":newkeywords}); 
    }); 
} 

// Adding the keyword 
function addkeyword(keyword){ 
    keywordsdiv.innerHTML += "<div class=\"keyword\" id=\"" + keyword + "\">" + keyword + "</div>"; 
    keywords[keywords.length] = keyword; 
    document.getElementById(keyword).addEventListener("click", function(){removekeyword(keyword)}); 
    newkeyword.value = ""; 
    chrome.storage.sync.get("keywords", function(result){ 
     var newkeywords = result.keywords; 
     newkeywords[newkeywords.length] = keyword; 
     chrome.storage.sync.set({"keywords":newkeywords}); 
    }); 
} 

Answer 1

與keyworddiv.innerHTML += ...重寫HTML失去所有的舊事件監聽器，因爲你recereating所有舊的DIV。使用keyworddiv.appendChild()可以添加新的DIV而不會打擾舊的DIV。在addkeyword新的代碼是：

var newDiv = document.createElement('div'); 
    newDiv.className = 'keyword'; 
    newDiv.id = keyword; 
    newDiv.innerHTML = keyword; 
    newDiv.addEventListener("click", function() { 
    removekeyword(keyword) 
    }); 
    keywordsdiv.appendChild(newDiv); 

我也發生了變化，從chrome.storage恢復關鍵字來調用這個函數的代碼，這樣我就不必重複它。

下面是完整的可執行代碼。

// Checking if this program didn't run earlier then set "keywords" 
 
chrome.storage && chrome.storage.sync.get("keywords", function(result) { 
 
    if (result.keywords == undefined) { 
 
    chrome.storage.sync.set({ 
 
     "keywords": [] 
 
    }); 
 
    } 
 
}); 
 

 
// All HTML content 
 
var keywordsdiv = document.getElementById("keywords"); 
 
var newkeyword = document.getElementById("newkeyword"); 
 
var addbutton = document.getElementById("add"); 
 
addbutton.addEventListener("click", function() { 
 
    addkeyword(newkeyword.value) 
 
}); 
 
var keywords = []; 
 

 
// Collect all information on Chrome storage and put in in the keywords 
 
chrome.storage && chrome.storage.sync.get("keywords", function(result) { 
 
    keywords = result.keywords; 
 
    keywords.forEach(addkeyword); 
 
}); 
 

 

 
// Remove the keyword 
 
function removekeyword(keyword) { 
 
    document.getElementById(keyword).remove(); 
 
    chrome.storage && chrome.storage.sync.get("keywords", function(result) { 
 
    var newkeywords = result.keywords; 
 
    newkeywords.forEach(_); 
 
    var bool = false; 
 

 
    function _(_keyword, index) { 
 
     if (bool) { 
 
     newkeywords[index - 1] = _keyword; 
 
     } 
 
     if (keyword == _keyword) { 
 
     bool = true; 
 
     } 
 
     if (bool && index === newkeywords.length - 1) { 
 
     newkeywords.splice(index, 1); 
 
     } 
 
    } 
 
    keywords = newkeywords; 
 
    chrome.storage && chrome.storage.sync.set({ 
 
     "keywords": newkeywords 
 
    }); 
 
    }); 
 
} 
 

 
// Adding the keyword 
 
function addkeyword(keyword) { 
 
    var newDiv = document.createElement('div'); 
 
    newDiv.className = 'keyword'; 
 
    newDiv.id = keyword; 
 
    newDiv.innerHTML = keyword; 
 
    newDiv.addEventListener("click", function() { 
 
    removekeyword(keyword) 
 
    }); 
 
    keywordsdiv.appendChild(newDiv); 
 
    keywords.push(keyword); 
 
    newkeyword.value = ""; 
 
    chrome.storage && chrome.storage.sync.get("keywords", function(result) { 
 
    var newkeywords = result.keywords; 
 
    newkeywords[newkeywords.length] = keyword; 
 
    chrome.storage.sync.set({ 
 
     "keywords": newkeywords 
 
    }); 
 
    }); 
 
}

Keywords: 
 
<div id="keywords"></div> 
 
New: 
 
<input type="text" id="newkeyword" /> 
 
<button id="add">Add</button>