Question

因此，用简单的术语来说，我正在创建一个Chrome扩展程序，到目前为止，该扩展程序只能保存来自互联网的链接，而不能删除它们。我要添加的是用于删除不需要的链接的“删除”按钮。到目前为止，我还没有解决这个问题。

我要删除的按钮是使用JavaScript添加的。 HTML的每个新块均具有“删除”按钮，但是单击该按钮不会执行任何操作。我尝试使用for循环将侦听器绑定到每个元素，但这似乎不起作用。

代码运行没有错误，并且我确定这个问题是一个轻微的疏忽，但是我才刚刚开始使用JavaScript，所以现在迷失了解决方案。

我已包含所有代码，因为我不想遗漏任何可能对找到解决方案必不可少的东西。

从添加链接的代码开始，然后删除单个链接，然后一次删除所有链接。谢谢大家的帮助，我真的很想让这个工作。

https://github.com/mmmamer/Drop 其余代码的存储库。主要是popup.html和popup.css。

var urlList = [];
var i = 0;

document.addEventListener('DOMContentLoaded', function() {
  getUrlListAndRestoreInDom();
  // event listener for the button inside popup window
  document.getElementById('save').addEventListener('click', addLink);
});

function addLink() {
  var url = document.getElementById("saveLink").value;
  addUrlToListAndSave(url);
  addUrlToDom(url);
}

function getUrlListAndRestoreInDom() {
  chrome.storage.local.get({
    urlList: []
  }, function(data) {
    urlList = data.urlList;
    urlList.forEach(function(url) {
      addUrlToDom(url);
    });
  });
}

function addUrlToDom(url) {
  // change the text message
  document.getElementById("saved-pages").innerHTML = "<h2>Saved pages</h2>";
  var newEntry = document.createElement('li');
  var newLink = document.createElement('a');
  var removeButton = document.createElement('button');

  removeButton.textContent = "Remove";
  //removeButton.createElement('button');
  removeButton.type = "button";
  removeButton.className = "remove";


  newLink.textContent = url;
  newLink.setAttribute('href', url);
  newLink.setAttribute('target', '_blank');

  newEntry.appendChild(newLink)
  newEntry.appendChild(removeButton);

  newEntry.className = "listItem";

  document.getElementById("list").appendChild(newEntry);

}

function addUrlToListAndSave(url) {
  urlList.push(url);
  saveUrlList();
  //}
}

function saveUrlList(callback) {
  chrome.storage.local.set({
    urlList
  }, function() {
    if (typeof callback === 'function') {
      //If there was no callback provided, don't try to call it.
      callback();
    }
  });
}

// remove a single bookmark item
document.addEventListener('DOMContentLoaded', function() {
  getUrlListAndRestoreInDom();
  var allButtons = document.getElementsByClassName('remove');

  function listenI(i) {
    allButtons[i].addEventListener('click', () => removeMe(i));
  }
  for (var i = 0; i < allButtons.length; i++) {
    listenI(i);
  }
});

function removeMe(i) {
  var fullList = documents.getElementsByClassName('listItem');
  listItem[i].parentNode.removeChild(listItem[i]);
}

//remove all button
document.addEventListener('DOMContentLoaded', function() {

    document.getElementById("remove-all").addEventListener('click', function() {
        var removeList = document.getElementsByClassName("listItem");
        while(removeList[0]) {
            removeList[0].parentNode.removeChild(removeList[0]);
        }
    })
});

Answer 1

chrome.storage.local.get()是异步的。因此，当您尝试将事件侦听器添加到“删除”按钮时，它们还不在DOM中。

您可以改为在addUrlToDom()函数中添加侦听器。这样，您还将在创建新按钮时添加事件监听器。

function addUrlToDom(url) {
  // change the text message
  document.getElementById("saved-pages").innerHTML = "<h2>Saved pages</h2>";
  var newEntry = document.createElement('li');
  var newLink = document.createElement('a');
  var removeButton = document.createElement('button');

  removeButton.textContent = "Remove";
  //removeButton.createElement('button');
  removeButton.type = "button";
  removeButton.className = "remove";


  newLink.textContent = url;
  newLink.setAttribute('href', url);
  newLink.setAttribute('target', '_blank');

  newEntry.appendChild(newLink)
  newEntry.appendChild(removeButton);
  removeButton.addEventListener("click", function() {
    var anchor = this.previousElementSibling;
    var url = anchor.getAttribute("href");
    removeUrlAndSave(url);
    this.parentNode.remove();
  });

  newEntry.className = "listItem";

  document.getElementById("list").appendChild(newEntry);

}

function removeUrlAndSave(url) {
  var index = urlList.indexOf(url);
  if (index != -1) {
    urlList.splice(index, 1);
    saveUrlList();
  }
}

通过类名称Javascript删除动态创建的元素

1 个答案: