title: onclick multiple event in for loop
body: <p>In my case. i want to create an onclick event that will be do multiple work.</p>
  <p><img src="https://i.stack.imgur.com/a0ZIP.jpg" alt="Here is an image" /></p>
  <p>in this image has an Add Item button. it will be increased the below html when click on it.</p>
  <pre><code>var addItemHTML = '&lt;tr class=&quot;hold-item&quot;&gt;\
             &lt;td&gt;&lt;strong&gt;'+typeField.value+': &lt;/strong&gt;&lt;/td&gt;\
             &lt;td&gt;&lt;input type=&quot;text&quot;&gt;&lt;/td&gt;\
             &lt;td&gt;&lt;img class=&quot;cancel-item&quot; src=&quot;icon/cancel.png&quot; height=&quot;25px&quot;&gt;&lt;/td&gt;\
             &lt;/tr&gt;';
  </code></pre>
  <p>So far so good. but here, i want to remove increased html one by one as my choose by click on each close icon. but i can't di that!</p>
  <p>i'm trying with this below javascript.</p>
  <pre><code>  var cancelIcon = document.getElementsByClassName(&quot;cancel-icon&quot;);
    var holeElement = document.getElementsByClassName(&quot;hole-element&quot;);
   
    for(i=0;i &lt; holeIElement.length;i++){
     cancelIcon[i].onclick = function(){
       holeElement[i].remove();
     }
     
   }
  </code></pre>
  <p>it doesn’t work. if anyone solve me!</p>