javascript - 无法在一次运行中删除多个数组元素

Question

今天我开始开发互联网过滤器，以便 parent 可以配置他们的 child 不能查看多个网站。

我正在努力解决关键字问题。如果我尝试删除所有关键字，它只会删除最后创建的关键字。当我查看控制台时，我没有看到任何错误。我必须关闭扩展程序并打开它才能删除下一个关键字。我认为这与 .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 会丢失所有旧的事件监听器，因为您正在重新创建所有旧的 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>