无法在导入的元素节点上添加事件侦听器

Question

I am fetching a list of posts from an API and displaying them on webpage. Now, there is a Delete button associated with each post which when clicked should remove the post.

index.html

    <template id="single-post">
      <li class="post-item">
        <h2></h2>
        <p></p>
        <button>DELETE</button>
      </li>
    </template>

    <ul class="posts"></ul>

app.js

  const listElement = document.querySelector('.posts');
  const postTemplate = document.getElementById('single-post');

  const listOfPosts = await sendHttpRequest(
    'GET',
    'https://jsonplaceholder.typicode.com/posts'
  );
  // listOfPosts is already in parsed format

  for (const post of listOfPosts) {
    const postEl = document.importNode(postTemplate.content, true);
    postEl.querySelector('h2').textContent = post.title.toUpperCase();
    postEl.querySelector('p').textContent = post.body;
    listElement.append(postEl);

    const btn = postEl.querySelector('button');
    console.log(btn, postEl);
    
    btn.addEventListener('click', () => {
      postEl.remove();
    });
  }

The above code only fetches first post only and throws

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLButtonElement.fetchPosts

When I remove the Event Listener, the code works fine.

I guess this is something to do with importNode method since I have done similar things with createElement and they worked fine

EDIT

I did some little experimenting. The JSON post object returned by API also consisted of an id field. So, I basically added that id to each button that was being created.

Another thing is I used event delegation to remove() the li whose button is clicked.

And very surprisingly It works

  const listElement = document.querySelector('.posts');
  const postTemplate = document.getElementById('single-post');

  const listOfPosts = await sendHttpRequest(
    'GET',
    'https://jsonplaceholder.typicode.com/posts'
  );
  // listOfPosts is already in parsed format

  for (const post of listOfPosts) {
    const postEl = document.importNode(postTemplate.content, true);
    postEl.querySelector('h2').textContent = post.title.toUpperCase();
    postEl.querySelector('p').textContent = post.body;

    postEl.querySelector('button').id = post.id;   // HERE

    listElement.append(postEl);
}


// delete the li element
listElement.addEventListener('click', (event) => {
  if(event.target.tagName === 'BUTTON') {
    console.log(event.target);
    event.target.parentElement.remove();
  }
})

when clicked on first list post's DELETE button, it consoles

<button id="1">DELETE</button>

and removes that item.

This bascially proves that the button tag is certainly there since we are able to query select and set its id. Strangely, when consoled it shows null .

Answer 1

Your code errors out here:

btn.addEventListener('click', () => {
  postEl.remove();
});

The error message clarifies that btn is null , which means that postEl.querySelector('button') returned null , which means that there is no button tag inside postEl .

You will need to carefully look at the result of document.importNode(postTemplate.content, true) and see what it contains. You will see that it does not contain a button tag. So, either the button was not added, in which case you will need to adjust importNode , or, the button is not a button tag, but something else, like <input type="button" value="foo"> for example.