how to access id of delete icon dynamically created in javascript

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

” Cannot read property ‘addEventListener’ of null “

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>

Answer

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

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>