Adding rows to table with button to remove

[myDeveloper]

I am creating a webshop. In order to display the shopping cart I would like to create Javascript functionality that allows to add a row to a table with the contents of the Shopping Cart for each product that has been purchased. This is simple via table.insertrow();

However, I would like that each of these rows contains a Delete button that allows to discard the product, and hence remove the row . Who knows how to do that? The button should not simply remove the last row. If the Shopping Cart contains e.g., 5 products, then by clicking ont the Delete button of the 2nd row, only the 2nd row should be removed.

Kind regards and many thanks

[Archibald]

Here is one way of doing it:

Consider adding that event listener function to the delete button when you add a new row to the table.

[myDeveloper]

Dear Archibald

Cool, many thanks!! Impressive with how little code this is possible. I learned to code in C more than 25 years ago. In C it would have required at least 10 times more lines!

I have two questions:

1. In case the page contains more tables with buttons, how would you adjust the code?
2. Now you add the listeners to all rows in one go. How would you change the code if you add a listener to the code which just added a line to the table?

Kind regards and many thanks

[kicken]

You can just add your remove listener to some common parent element, rather than to the all the remove buttons individually. The listener then would test if the item clicked is the remove button and if so, remove the row.

Example:

  table.addEventListener('click', (e) => {
    if (e.target.nodeName === 'BUTTON' && e.target.name === 'remove') {
      e.target.closest('tr').remove();
    }
  });

If you want to have the same effect on multiple tables, move the listener to a higher common parent element (body if need be, but you should go as narrow as you can) or apply the listener to the individual tables separately.

[myDeveloper]

Dear Kicken,

Many thanks! Can I rephrase my question as follows:

What would be the code for a function, which every time it is executed, it adds a row to a table myTable, which contains three columns. The last column contains a button Remove. When pressed, that specific row is removed.

Kind regards and many thanks

[kicken]

For adding a row, what I generally do is use a template with the row content. Add a button that when clicked, clones the template and adds the newly cloned row to the table.

Example:

<button id="addRowButton">
  Add a row
  <template>
    <tr>
      <td>New row</td>
      <td><button type="button" name="remove">Remove</button></td>
    </tr>
  </template>
</button>

JavaScript:

  const table = document.getElementById('theTable');
  const addButton = document.getElementById('addRowButton');
  addButton.addEventListener('click', (e)=>{
  	const newRow = addButton.querySelector('template').content.cloneNode(true);
   	table.appendChild(newRow);
  });

[myDeveloper]

it works now, thanks a million to everyone!!!