running a for loop for multiple onclick events

Question

running a for loop for multiple onclick events

I have a situation where I need to create an onclick event that performs multiple tasks.

There is a button labeled Add Item in the image below. When clicked, it should add the HTML code shown below:

var addItemHTML = '<tr class="hold-item">\
           <td><strong>'+typeField.value+': </strong></td>\
           <td><input type="text"></td>\
           <td><img class="cancel-item" src="icon/cancel.png" height="25px"></td>\
           </tr>';

Everything works fine up to this point, but now I want to be able to remove the added HTML elements one by one by clicking on each close icon, and I'm having trouble achieving this!

I've attempted to use the following JavaScript code:

  var cancelIcon = document.getElementsByClassName("cancel-icon");
  var holdElement = document.getElementsByClassName("hold-element");
 
  for(i=0;i < holdElement.length;i++){
   cancelIcon[i].onclick = function(){
     holdElement[i].remove();
   }
   
 }

Unfortunately, it doesn't seem to work. Can someone help me solve this issue?

javascript html css

Answer 1

Answer №1

Delegate!

Example

NOTE: Make sure to utilize tbody and addEventListener for the onclick event as well.

var addItemBtn = document.getElementById("add-item-btn");
var itemTable = document.getElementById("item-table");
var typeField = document.getElementById("type-field");

addItemBtn.addEventListener("click", function() {

  var addItemHTML = '<tr class="hole-element">\
               <td><strong>' + typeField.value + ': </strong></td>\
               <td><input type="text"></td>\
               <td><img class="cancel-icon" src="icon/cancel.png" height="25px"></td>\
               </tr>';

  itemTable.innerHTML += addItemHTML;
})

document.getElementById("item-table").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("cancel-icon")) tgt.closest("tr").remove();
});

.product_add {
  overflow: hidden;
}

.product_add_left_side {
  /* background: rgb(230,230,230);*/
  display: inline-block;
  float: left;
  padding: 10px;
}

.product_add_right_side {
  /*background: rgb(200,200,200);*/
  display: inline-block;
  float: left;
  padding: 10px;
}

.cancel-icon {
  transition: 0.3s;
  margin-left: 15px;
}

.cancel-icon:active {
  -webkit-transform: scale(0.9);
}

<div class="product_add">

  <div class="product_add_left_side">
    <img src="icon/image.jpg" height="220px">
  </div>

  <div class="product_add_right_side">
    <table>
      <tbody id="item-table">
        <tr>
          <td><strong>Name: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr>
          <td><strong>Unit: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr>
          <td><strong>Price: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr>
          <td><strong>In Stock: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr class="hole-element">
          <td><strong>Hello: </strong></td>
          <td><input type="text"></td>
          <td><img class="cancel-icon" src="icon/cancel.png" height="25px"></td>
        </tr>

        <tr class="hole-element">
          <td><strong>Hello: </strong></td>
          <td><input type="text"></td>
          <td><img class="cancel-icon" src="icon/cancel.png" height="25px"></td>
        </tr>
      </tbody>
    </table>

    <input type="text" id="type-field">
    <button id="add-item-btn">Add Item</button>
    <div id="demo"></div>
  </div>

</div>

<div id="load-product-js"></div>

Alternatively, it is recommended to implement a closure.

JavaScript closure inside loops – simple practical example

Furthermore, ensure consistency between 'cancel-icon' and 'cancel-item' class names.

Answer 2

Delegate!

Example

NOTE: Make sure to utilize tbody and addEventListener for the onclick event as well.

var addItemBtn = document.getElementById("add-item-btn");
var itemTable = document.getElementById("item-table");
var typeField = document.getElementById("type-field");

addItemBtn.addEventListener("click", function() {

  var addItemHTML = '<tr class="hole-element">\
               <td><strong>' + typeField.value + ': </strong></td>\
               <td><input type="text"></td>\
               <td><img class="cancel-icon" src="icon/cancel.png" height="25px"></td>\
               </tr>';

  itemTable.innerHTML += addItemHTML;
})

document.getElementById("item-table").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("cancel-icon")) tgt.closest("tr").remove();
});

.product_add {
  overflow: hidden;
}

.product_add_left_side {
  /* background: rgb(230,230,230);*/
  display: inline-block;
  float: left;
  padding: 10px;
}

.product_add_right_side {
  /*background: rgb(200,200,200);*/
  display: inline-block;
  float: left;
  padding: 10px;
}

.cancel-icon {
  transition: 0.3s;
  margin-left: 15px;
}

.cancel-icon:active {
  -webkit-transform: scale(0.9);
}

<div class="product_add">

  <div class="product_add_left_side">
    <img src="icon/image.jpg" height="220px">
  </div>

  <div class="product_add_right_side">
    <table>
      <tbody id="item-table">
        <tr>
          <td><strong>Name: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr>
          <td><strong>Unit: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr>
          <td><strong>Price: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr>
          <td><strong>In Stock: </strong></td>
          <td><input type="text"></td>
        </tr>

        <tr class="hole-element">
          <td><strong>Hello: </strong></td>
          <td><input type="text"></td>
          <td><img class="cancel-icon" src="icon/cancel.png" height="25px"></td>
        </tr>

        <tr class="hole-element">
          <td><strong>Hello: </strong></td>
          <td><input type="text"></td>
          <td><img class="cancel-icon" src="icon/cancel.png" height="25px"></td>
        </tr>
      </tbody>
    </table>

    <input type="text" id="type-field">
    <button id="add-item-btn">Add Item</button>
    <div id="demo"></div>
  </div>

</div>

<div id="load-product-js"></div>

Alternatively, it is recommended to implement a closure.

JavaScript closure inside loops – simple practical example

Furthermore, ensure consistency between 'cancel-icon' and 'cancel-item' class names.

Answer 3

Answer №2

It is recommended to utilize document.createElement() when creating new elements, and either use ParentNode.append() or Node.appendChild() when adding these elements to the DOM.
The benefits of using this approach include:

Reduced risk of invalidating HTML
Avoid accidental removal of existing element listeners
Simplified configuration of newly created elements (e.g., adding event listeners)

One drawback is that it may increase the length of your JavaScript code.

Nevertheless, employing this method of appending a new <tr> allowed me to easily reference it for removal when the cancel-button is pressed.

This means that with easy referencing, you can dynamically add rows with the desired behavior.

Note
I replaced

<td><strong></strong></td>

with <th></th> as the nested elements seemed to align with the semantic purpose of <th>.

I also attached the click-listener to a button containing the cancel icon because setting up a click-listener for elements other than <a>, <button>, or <input> can be more challenging to make accessible. You can still style the button to appear without border or background, displaying only the image as intended.

const itemTable = document.querySelector("#item-table");
const typeField = document.querySelector("#type-field");
document.querySelector("#add-item-btn").addEventListener("click", () => {
  let tr = document.createElement("tr");
  tr.classList.add("hole-element");
  
  let th = document.createElement("th");
  th.innerHTML = typeField.value + ":";
  th.setAttribute("style", "text-align: left");
  tr.append(th);
  
  let td = document.createElement("td");
  tr.append(td);
  
  let input = document.createElement("input");
  input.setAttribute("type", "text");
  td.append(input);
  
  td = document.createElement("td");
  tr.append(td);
  
  let button = document.createElement("button");
  button.classList.add("cancel-icon");
  button.addEventListener("click", () => {
    tr.remove();
  });
  td.append(button);
  
  let img = document.createElement("img");
  img.setAttribute("src", "icon/cancel.png");
  img.setAttribute("height", "25px");
  button.append(img);
  
  itemTable.append(tr);
  typeField.value = "";
});

th {text-align: left}
.cancel-icon{
  transition: 0.3s;
  margin-left: 15px;
}
.cancel-icon:active{transform: scale(0.9)}

<table id="item-table">
  <tr>
    <th>Name: </th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>Unit: </th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>Price: </th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>In Stock: </th>
    <td><input type="text"></td>
  </tr>
</table>

<input type="text" id="type-field">
<button id="add-item-btn">Add Item</button>

Answer 4

It is recommended to utilize document.createElement() when creating new elements, and either use ParentNode.append() or Node.appendChild() when adding these elements to the DOM.
The benefits of using this approach include:

Reduced risk of invalidating HTML
Avoid accidental removal of existing element listeners
Simplified configuration of newly created elements (e.g., adding event listeners)

One drawback is that it may increase the length of your JavaScript code.

Nevertheless, employing this method of appending a new <tr> allowed me to easily reference it for removal when the cancel-button is pressed.

This means that with easy referencing, you can dynamically add rows with the desired behavior.

Note
I replaced

<td><strong></strong></td>

with <th></th> as the nested elements seemed to align with the semantic purpose of <th>.

I also attached the click-listener to a button containing the cancel icon because setting up a click-listener for elements other than <a>, <button>, or <input> can be more challenging to make accessible. You can still style the button to appear without border or background, displaying only the image as intended.

const itemTable = document.querySelector("#item-table");
const typeField = document.querySelector("#type-field");
document.querySelector("#add-item-btn").addEventListener("click", () => {
  let tr = document.createElement("tr");
  tr.classList.add("hole-element");
  
  let th = document.createElement("th");
  th.innerHTML = typeField.value + ":";
  th.setAttribute("style", "text-align: left");
  tr.append(th);
  
  let td = document.createElement("td");
  tr.append(td);
  
  let input = document.createElement("input");
  input.setAttribute("type", "text");
  td.append(input);
  
  td = document.createElement("td");
  tr.append(td);
  
  let button = document.createElement("button");
  button.classList.add("cancel-icon");
  button.addEventListener("click", () => {
    tr.remove();
  });
  td.append(button);
  
  let img = document.createElement("img");
  img.setAttribute("src", "icon/cancel.png");
  img.setAttribute("height", "25px");
  button.append(img);
  
  itemTable.append(tr);
  typeField.value = "";
});

th {text-align: left}
.cancel-icon{
  transition: 0.3s;
  margin-left: 15px;
}
.cancel-icon:active{transform: scale(0.9)}

<table id="item-table">
  <tr>
    <th>Name: </th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>Unit: </th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>Price: </th>
    <td><input type="text"></td>
  </tr>
  <tr>
    <th>In Stock: </th>
    <td><input type="text"></td>
  </tr>
</table>

<input type="text" id="type-field">
<button id="add-item-btn">Add Item</button>

running a for loop for multiple onclick events

Answer №1

Answer №2

Similar questions

Efficiently Summing Array Elements with Recursive Reduction

Need help setting parsed values on jQuery Autocomplete after Keyup event?

Troubleshooting Tooltip Problem on Highcharts US Bubble Map

The subsequent code still running even with the implementation of async/await

Guide to inheriting and overriding text styles

How can I make sure addEventListener only responds to numbers and not images?

How can I verify if an unsupported parameter has been passed in a GET request using Express/Node.js?

Looking for a jquery plugin that allows you to easily toggle between showing and hiding elements

Changing the MIME type of a JavaScript file in a Jade/Pug environment to text/html

Implement ng-model on an input field that is pre-filled with a value from a different model within the Angular

Issue with interaction between php and jQuery on click event

The ƒ character doesn't seem to be a match for the JavaScript regex

Building intricate hierarchical menus with Material-UI 4.9

Updating the parameters when clicking on each pagination button: A guide

placing the grid elements side by side within the grid system

Error: The property 'getClientRects' cannot be read because it is null

Employing angular-ui-bootstrap to display pop-up notifications

Assistance with JSONP (Without the use of jQuery)

${resource} and ${promise} are both returning undefined values

Discord.js Discord bot error: 'gateway' down