removing items from an Array when clicking delete icon in html row
<p>every1
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?</p>

<p>here's my code</p>

<pre><code>&lt;script&gt;

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&gt;0){
        var tbl = document.getElementById('tabla_estilo'); 

        var newRow = tbl.insertRow(tbl.rows.length);
        var cell1 = newRow.insertCell(0);
        cell1.textAlign='center';
        cell1.innerHTML='&lt;a href="#"&gt;&lt;img src="images/edit.png" width="14" height="14" alt="Edit"/&gt;&lt;/a&gt;'

        var cell2 = newRow.insertCell(1);
        cell2.textAlign='center';
        cell2.innerHTML='&lt;a href="#" class="delete"&gt;&lt;img src="images/delete.png" width="14" height="14" alt="Delete"/&gt;&lt;/a&gt;'

        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;          
    }
}
</code></pre>

<p>
And here's how my form looks
<img src="http://i.stack.imgur.com/XVEfM.jpg" alt="alt text"></p>
