Getting the ID of a section

Hello everyone, I’m currently coding the javascript for an e-commerce website and using javascript to add the html for each product using a loop. This means that for each product I have a delete button like this :

<p id="delete" class="${productTitle}" onclick="removeItems()">Delete</p>
I would like to recover the class of this to then use it to remove the product it is refering from the local storage but because I have a loop if I have a function such as 
function removeItems() {
  console.log(${productTitle}); 
}

I am only getting the last assigned value of ${productTitle}
How can I make sure that I get the correct class that the button is using please?

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

thank you, I’m new here sorry I didn’t realise!

Can you elaborate what you mean? Do you have your full code available somewhere?

Not sure what your for loop looks like, but if you could show us more code, it would help us to guide you to a solution.

1 Like

Ofcourse, here is a link to the whole js code :slight_smile:

Thanks in advance, I’ve been stuck for ages!

This is slightly off topic, but I couldn’t help myself :slight_smile:

That is not a button. For accessibility, you should be using an actual <button> element. Adding a click handler to a p element does not make it accessible.

Yes good point! I’m doing this for coursework and the html was imposed, I’m not sure why they used

for this but I’ve kept it that way just incase they applied styles to it as I’m not supposed to touch the css for this site :slight_smile:

@ohsand You are in good hands now. @bbsmooth will take it from here.

1 Like

Oh wow. Hopefully there is a future lesson which teaches why using a p for a button is bad for accessibility. If not, I’d get a refund :slight_smile:

thank you very much! Fingers crossed we’ll manage to sort it out!

It would be nice with a working example (with the products).


You can get the event.target inside the handler to get the click target (the button). From there you can do DOM traversal to get to any element from the click target (parent, siblings). When you have the element you want you can look at the attributes or content of the element.

Haha it did seem odd but for the javascript side of things it shouldn’t change much I guess! I just can’t seem to figure out how to get it to work, here is a link to the github hosted code as it is currently if this helps: Kanap
as you’ll see, the console(log) is showing the same productTitle no matter which delete button is clicked on! :sweat_smile:

Here it is so far Kanap
As you’ll see the console gives out the same value of productTitle no matter which delete button is clicked…
I agree with you, that seems like a good way to do it but I just can’t seem to get it working :confused:

1 Like

If you are going to assign the event handler using the onclick attribute then you can’t just call the function like that because you won’t have access to any of the event details, such as the button that was clicked. One way to get access to those details is to use an IIFE instead:

<button onclick='(function(e){removeItems(e);})(event);'>

Then add the event parameter to removeItems:

function removeItems(event) {

And now you have access to the actual button you clicked on through event.target and so you can find the class for the button and anything else you need to know about the button.

One other thing, if you are planning on having multiple delete buttons on the page at one time then you can’t give them all the same id of delete. ID’s are supposed to be unique on the page.

Thank you for taking the time to reply, with the code that you provided what can I add in the function in order to get the class? I will remove the on the article sections, it was just to test something I forgot to remove! :sweat_smile:

The IIFE is not needed. You can just specify event as the argument for the removeItems:

<div></div>
<button onclick='removeItems(event)'>
const div = document.querySelector('div');

['tv', 'couch', 'table'].forEach(function(productTitle) {
  div.innerHTML += `
    <p>
      ${productTitle}
      <button class="${productTitle}" onclick="removeItems(event)">Delete</button>
    </p>
  `;
});

function removeItems(event) {
  console.log(event.target.className) // displays the product title
}
1 Like

Ahh, of course you’re right. I guess I was thinking it couldn’t be that easy :slight_smile: I never use the onclick attribute and I guess I was thinking it had some limitations.

1 Like

You do not actually need to pass or accept the event. You have access to the event object inside the handler, it is called event inside the handler. But I don’t think being explicit about it is bad.

I update a random Codepen I had with some quick button logic.

That is true. event is global.

Well will you look at that!