如何访问在javascript中动态创建的删除图标的id [英] how to access id of delete icon dynamically created in javascript

问题描述

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

I am trying to make a leads tracker. When I hit save input btn input value gets rendered. It has a small del button which is created in javascript. I had given it an id and first access it using document.getElementById() and then add an event listener to it. But it is giving an error

"无法读取 null 的属性addEventListener""

" Cannot read property 'addEventListener' of null "

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

ON clicking that btn I want to delete that li element

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>

推荐答案

当您尝试访问时，您的 html 缺少您尝试访问的图标.

Your html is missing the icon you are trying to access when you tried to access it.

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

To delete stuff in a list, you need to delegate

我给图标一个 delete 类而不是 icon

I give the icons a class of delete instead of the invalid duplicate ID of icon

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>

这篇关于如何访问在javascript中动态创建的删除图标的id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！