如何访问在 javascript 中动态创建的删除图标的 ID

Question

我正在尝试制作潜在客户跟踪器。当我点击保存输入按钮时，输入值被渲染。它有一个在 javascript 中创建的小删除按钮。我给了它一个 id 并首先使用 document.getElementById() 访问它，然后向它添加一个事件侦听器。但它给出了一个错误

" Cannot read property 'addEventListener' of null "

单击那个 btn 我想删除那个 li 元素

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
const deleteBtn = document.getElementById("delete-btn")
const leadsFromLocalStorage = [] // JSON.parse(localStorage.getItem("myLeads") || '[]')
const tabBtn = document.getElementById("tab-btn")
const iconEl = document.getElementById("icon")

if (leadsFromLocalStorage) {
  myLeads = leadsFromLocalStorage
  render(myLeads)
}

tabBtn.addEventListener("click", function() {
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, function(tabs) {
    myLeads.push(tabs[0].url)
    // localStorage.setItem("myLeads", JSON.stringify(myLeads))
    render(myLeads)
  })
})

function render(leads) {
  let listItems = ""
  for (let i = 0; i < leads.length; i++) {
    listItems += `
            <li>
                <a target='_blank' href='${leads[i]}'>
                    ${leads[i]}
                </a><i class="ri-close-circle-line" id="icon"></i>
            </li>
        `
  }
  ulEl.innerHTML = listItems
}

deleteBtn.addEventListener("dblclick", function() {
  //  localStorage.clear()
  myLeads = []
  render(myLeads)
})

inputBtn.addEventListener("click", function() {
  if (inputEl.value) {
    myLeads.push(inputEl.value)
    inputEl.value = ""
    //  localStorage.setItem("myLeads", JSON.stringify(myLeads))
    render(myLeads)
  }
})
/*
iconEl.addEventListener("click", function() {
  console.log("icon")
}) */

<input type="text" id="input-el">
<button id="input-btn">SAVE INPUT</button>
<button id="tab-btn">SAVE TAB</button>
<button id="delete-btn">DELETE ALL</button>

<ul id="ul-el"> </ul>

Answer 1

您的 html 在您尝试访问时缺少您尝试访问的图标。

要删除列表中的内容，您需要委托

我给图标一个 delete 的 class，而不是 icon

的无效重复 ID

ulEl.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("delete")) {
    const task = tgt.closest("li");
    const url = task.querySelector("a").getAttribute("href"); // important
    const idx = myLeads.findIndex(item => item === url);
    myLeads.splice(idx,1)
    console.log(myLeads)
    localStorage.setItem("myLeads", JSON.stringify(myLeads))
    task.remove()
  }
})

let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
const deleteBtn = document.getElementById("delete-btn")
const leadsFromLocalStorage = ["/Task1", "/Task2"] // JSON.parse(localStorage.getItem("myLeads") || '[]'); // Stacksnippets do not allow localStorage
const tabBtn = document.getElementById("tab-btn")
const iconEl = document.getElementById("icon")

if (leadsFromLocalStorage) {
  myLeads = leadsFromLocalStorage
  render(myLeads)
}

tabBtn.addEventListener("click", function() {
  chrome.tabs.query({
    active: true,
    currentWindow: true
  }, function(tabs) {
    myLeads.push(tabs[0].url)
    // localStorage.setItem("myLeads", JSON.stringify(myLeads))
    render(myLeads)
  })
})

function render(leads) {
  let listItems = ""
  for (let i = 0; i < leads.length; i++) {
    listItems += `
            <li>
                <a target='_blank' href='${leads[i]}'>
                    ${leads[i]}
                </a><i class="ri-close-circle-line delete">X</i>
            </li>
        `
  }
  ulEl.innerHTML = listItems
}

deleteBtn.addEventListener("dblclick", function() {
  //  localStorage.clear()
  myLeads = []
  render(myLeads)
})

inputBtn.addEventListener("click", function() {
  if (inputEl.value) {
    myLeads.push(inputEl.value)
    inputEl.value = ""
    //  localStorage.setItem("myLeads", JSON.stringify(myLeads))
    render(myLeads)
  }
})

ulEl.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("delete")) {
    const task = tgt.closest("li");
    const url = task.querySelector("a").getAttribute("href"); // important
    const idx = myLeads.findIndex(item => item === url);
    myLeads.splice(idx,1)
    console.log(myLeads)
    //localStorage.setItem("myLeads", JSON.stringify(myLeads))
    task.remove()
  }
})

<input type="text" id="input-el">
<button id="input-btn">SAVE INPUT</button>
<button id="tab-btn">SAVE TAB</button>
<button id="delete-btn">DELETE ALL</button>
<ul id="ul-el">
</ul>

Answer 2

逻辑

向模板添加删除按钮。
绑定一个 onclick 事件。
从列表中删除节点并在单击时更新本地存储。

let todo = []

let inputEl = document.getElementById("input-el")
let inputBtn = document.getElementById("input-btn")
let ulEl = document.getElementById("ul-el")
let deletBtn = document.getElementById("delete-btn")

let savedList = JSON.parse(localStorage.getItem("todo"))

if (savedList) {
  todo = savedList
  createList()
}

function createList() {
  let listItems = ""
  for (i = 0; i < todo.length; i++) {
    listItems +=
      `<li>
        ${todo[i]}
        <button onclick="deleteNode(${i})">delete</button>
    </li>`                            //<------want to add the button here
  }
  ulEl.innerHTML = listItems
}

function deleteNode(index) {
  todo.splice(index, 1);
  localStorage.setItem("todo", JSON.stringify(todo))
  createList();
}

inputBtn.addEventListener("click", function () {
  todo.push(inputEl.value)
  inputEl.value = "";
  localStorage.setItem("todo", JSON.stringify(todo))
  createList();
})

deletBtn.addEventListener("dblclick", function () {
  localStorage.clear()
  todo = []
  createList()
})

<h1>TO-DO</h1>
<input type="text" id="input-el" /><br />
<button id="input-btn">Add</button>
<button id="delete-btn">Delete All</button>
<ul id="ul-el"></ul>

如何访问在 javascript 中动态创建的删除图标的 ID

how to access id of delete icon dynamically created in javascript

html

javascript

addeventlistener