How to set up remove item buttons in vanilla-typescript todo app

Question

I am creating a basic todo list app using vanilla typescript. After appending buttons to each list item, I want the items to delete when the user clicks the button on a specific list item. To execute this, I tried adding a 2nd addEventListener method in index.ts to listen for remove button clicks, then remove the child of the parent element. My addEventListener method looks like this:

listItemBtn.addEventListener("click", (e: Event) => {
  const element = e.target as HTMLUListElement;
  element.removeChild(element);
});

However, I keep getting an error in the console that says "Uncaught TypeError: Cannot read property 'addEventListener' of null". I am not sure why I can't append .addEventListener to listItemBtn without errors. Any idea how to fix this?

Here is a link to the project in CodeSandBox: https://codesandbox.io/s/vanilla-typescript-forked-xnnf4

the sandbox doesnt have any element with id listItemBtn, so your const (listItemBtn) is null... — Moshezauros, Apr 08 '21 at 18:18
Also, once you've fixed that issue, you'll have the problem that you're aiming to use the unique `id` field of the listItemBtn to identify, manipulate it. Of course if you have multiple list items on the page, they can't all have the same unique id `listItemBtn` as that's not how uniqueness works. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id — cefn, Apr 08 '21 at 18:44
@Moshezauros I used .setAttribute in ListTemplate to add ID listItemBtn to the dynamically appended button. I set the const for the button in index.ts to look for that ID, but it still doesn't work. — JS_is_awesome18, Apr 08 '21 at 18:56
@JS_is_awesome18 you are looking for the `listItemBtn` before it exists. If you add this line `document.querySelectorAll("#listItemBtn").forEach(console.log);` at the end of your `form.addEventListener` then you'll start to see it populating with elements. But there's a lot that needs to change in this code. Be cautious with using `as` because it prevents Typescript from seeing potential runtime errors, like that an element might be `null`. — Linda Paiste, Apr 08 '21 at 19:50

Linda Paiste · Accepted Answer · 2021-04-08T20:18:32.250

You are looking for the listItemBtn before it exists. If you add this line

document.querySelectorAll("#listItemBtn").forEach(console.log);

at the end of your form.addEventListener then you'll start to see it populating with elements.

There's a lot that needs to change in this code. Be cautious with using as because it prevents Typescript from seeing potential runtime errors, like that an element might be null.

Your question is how to set up the remove buttons, so I don't actually think that querySelectorAll is the correct way. I would add the listener where you create btn. At that point you already have the button element as a variable.

Your listener function itself has problems. Again you have a troublesome as in const element = e.target as HTMLUListElement; because the target is the button, not the li.

element.removeChild(element) is wrong because you need to be calling removeChild on the parent, like parent.removeChild(child). You can look as element.parentElement (which might be null). Since we are moving this function into ListTemplate then we have access to the parent li variable. The element that we want to remove is the li from the ul. So actually our e.target which is btn isn't very useful.

Inside the render method of ListTemplate, do this:

btn.addEventListener("click", () => {
   this.container.removeChild(li);
});

As mentioned in the comments, you should not set an id which is not unique. You could use className instead:

btn.className = "listItemBtn";

But you only need that for styling. We no longer query this element anywhere.

You can clean up your form submit listener. There is no reason to create a variable and then assign it. Just assign it directly. This also removes the need to manually specify types because the type is known from the value that you set to the variable.

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const value = listItem.value;

  const doc = new ListItem(value);

  list.render(doc, value, "start");
});

This worked, and that explanation makes sense. Thank you very much!!! — JS_is_awesome18, Apr 08 '21 at 21:29
I also updated the sandbox with those changes: https://codesandbox.io/s/vanilla-typescript-forked-xnnf4 — JS_is_awesome18, Apr 08 '21 at 23:07

How to set up remove item buttons in vanilla-typescript todo app

1 Answers1