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

Can't delete multiple array elements in one run

本文关键字：运行 删除 数组元素 一次      更新时间：2023-09-26

今天我开始研究互联网过滤器，以便父母可以配置他们的孩子不能查看多个网站。

我正在努力解决关键字问题。如果我尝试删除所有关键字，它只会删除最后一个关键字。当我查看控制台时，我没有看到任何错误。我必须关闭我的扩展并打开它才能删除下一个关键字。我认为这与.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});
    });
}
使用

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>

相关文章：