javascript - removing items from an Array when clicking delete icon in html row -

i have bit of problem. i'm trying add,remove , edit items in array of objects, showing content in html table,but without form submission. far i've managed add items ( david calhoun ), facing new issue, since don't know how row index (when click delete image) ,so can delete row. there way achieve this?

here's code

<script>  var table = []; function adddetail() {     table.push({                     price: document.getelementbyid('price').value,         description: document.getelementbyid('descripcion').value     });      showrow(table.length-1);     resetentries();  } function resetentries() {     document.getelementbyid('price').value='';     document.getelementbyid('descripcion').value='';     document.getelementbyid('price').focus();  }  function showrow(i) {     if (table.length>0){         var tbl = document.getelementbyid('tabla_estilo');           var newrow = tbl.insertrow(tbl.rows.length);         var cell1 = newrow.insertcell(0);         cell1.textalign='center';         cell1.innerhtml='<a href="#"><img src="images/edit.png" width="14" height="14" alt="edit"/></a>'          var cell2 = newrow.insertcell(1);         cell2.textalign='center';         cell2.innerhtml='<a href="#" class="delete"><img src="images/delete.png" width="14" height="14" alt="delete"/></a>'          var cell3 = newrow.insertcell(2);         cell3.textalign='center';         cell3.innerhtml=table[i].price;          var cell4 = newrow.insertcell(3);         cell4.textalign='center';         cell4.innerhtml=table[i].description;               } } 

, here's how form looks

from onclick handler delete button, can traverse <tr> , row's rowindex property.

so in onclick:

var node = this.parentnode; while( node && node.tagname !== 'tr' ) {     node = node.parentnode; }  var index = node.rowindex; 

so when you're setting row cells, can add handler:

var cell2 = newrow.insertcell(1); cell2.textalign='center'; cell2.innerhtml='<a href="#" class="delete"><img src="images/delete.png" width="14" height="14" alt="delete"/></a>'  cell2.firstchild.onclick = function() {     var node = this.parentnode;     while( node && node.tagname !== 'tr' ) {         node = node.parentnode;     }     var index = node.rowindex;     alert('index');     return false; } 

this creates new function each row. better reference named function instead.