无法在一次运行中删除多个阵列元素

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>