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

I have a bit of a problem. I'm trying to add,remove and edit items in an array of objects, showing its content in a html table,but without form submission. So far I've managed to add items ( thanks to David Calhoun ), but now I facing a new issue, since I don't know how to get the row index (when I click the delete image) ,so that I can delete that row. Is there any way to achieve this?

here's my 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].d开发者_C百科escription;          
    }
}

And here's how my form looks

From the onclick handler for the delete button, you can traverse up to its <tr> and then get that row's rowIndex property.

So in the onclick:

var node = this.parentNode;
while( node && node.tagName !== 'TR' ) {
    node = node.parentNode;
}

var index = node.rowIndex;

So when you're setting up your row cells, you can add a 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 a new function for each row. It would be better to reference a named function instead.

with JQuery use any of these selector

$('table tr').each(function(i, v) { alert((i+1) + ' row') });

$('table tr:nth-child(i)').hide(); 

OR

 <a href="#" class="delete" onclick="$(this).parent().parent().hide()">

When you create a new row in the table use a custom attribute in to store the index of the element in the array:

<tr position='0'><td></td><td></t></tr>
<tr position='1'><td></td><td></t></tr>
<tr position='2'><td></td><td></t></tr>
<tr position='3'><td></td><td></t></tr>

Alternatively, if your rows are always in the same order as the elements in the array you may check how many previous siblings there are before this row.

I would use the first approach as it will still work if you reorder the rows in the table.

Make sure that if you delete the row you then recalculate row position attributes.