want to delete tablerow

Question

i have a table .

 

<table id="memberInfo">
<tr>
<th>
Name
</th>
<th>
Gender
</th>
<th>
Age
</th>
<th>
Unique Mark
</th>
<th>
Relation
</th>
</tr>
<tr>
<td>
<asp:TextBox CssClass="styleTxtBox" name="Name" ID="TextBox3" Width="90px" placeholder="Name"
runat="server"></asp:TextBox>
</td>
<td>
<asp:DropDownList ID="DropDownList2" CssClass="styleTxtBox" Width="70px" runat="server">
<asp:ListItem Text="Male" Selected="True" Value="1"></asp:ListItem>
<asp:ListItem Text="Female" Value="0"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:TextBox CssClass="styleTxtBox" ID="TextBox5" Width="60px" placeholder="Age"
runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox CssClass="styleTxtBox" ID="TextBox6" Width="200px" placeholder="Unique Mark"
runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox CssClass="styleTxtBox" ID="TextBox7" Width="120px" placeholder="Relation"
runat="server"></asp:TextBox>
</td>
<td>
<a onclick="AddMember('memberInfo')" style="cursor: pointer;" title="Add more template">
<img src="icon/plus.png" /></a>
</td>
</tr>
</table>

 

and a javascript method to add new row in table

 

<script type="text/javascript">
var count = 1;
function AddMember(in_tbl_name) {
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
var strHtml2 = "<input type=\"text\" name=\"Name\" class=\"styleTxtBox\" placeholder=\"Name\" style=\"width: 90px;\" />";
td1.innerHTML = strHtml2.replace(/!count!/g, count);
// create table cell 2
var td2 = document.createElement("TD")
var strHtml3 = "<select class=\"styleTxtBox\" style=\"width:70px;\" name=\"Gender\"><option value=\"1\" selected=\"selected\">Male</option><option value=\"0\">Female</option></select>";
td2.innerHTML = strHtml3.replace(/!count!/g, count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml4 = "<input type=\"text\" name=\"Age\" class=\"styleTxtBox\" placeholder=\"Age\" style=\"width: 60px;\" />";
td3.innerHTML = strHtml4.replace(/!count!/g, count);
// create table cell 4
var td4 = document.createElement("TD")
var strHtml5 = "<input type=\"text\" name=\"Unique\" class=\"styleTxtBox\" placeholder=\"Unique Mark\" style=\"width: 200px;\" />";
td4.innerHTML = strHtml5.replace(/!count!/g, count);
// create table cell 5
var td5 = document.createElement("TD")
var strHtml6 = "<input type=\"text\" name=\"Relation\" class=\"styleTxtBox\" placeholder=\"Relation\" style=\"width: 120px;\" />";
td5.innerHTML = strHtml6.replace(/!count!/g, count);
// create table cell 6
var td6 = document.createElement("TD")
var strHtml7 = "<a title=\"remove template\" name=\"AddMemberMore\" style=\"cursor: pointer;\" onclick=\"delRow()\" ><img src=\"icon/minus.png\"></img></a>";
td6.innerHTML = strHtml7.replace(/!count!/g, count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
count = parseInt(count) + 1;
// add to count variable
// append row to table
tbody.appendChild(row);
}

</script>

 

Now my question is that i want to delete a perticular row on click of minus image by javascript method.

thanks in advance

Answer 1

If the answer is good, please do accept answer..

Answer 2

thanks to everyone for help

Answer 3

You can  do this by using rowIndex

 Change the delRow function call with parameters

 var strHtml7 = "<a title=\"remove template\" name=\"AddMemberMore\" style=\"cursor: pointer;\" onclick=\"delRow('memberInfo', this)\" >-</a>";

 

Here is delRow function 

 

function delRow(in_tbl_name, r) {

var rIndex = r.parentNode.parentNode.rowIndex;

var tbl = document.getElementById(in_tbl_name);

tbl.deleteRow(rIndex);

}

 

Happy Scripting!

 

Answer 4

 Create the function delRow 

function delRow(row)

{

row.parentNode.parentNode.parentNode.removeChild(row.parentNode.parentNode);

}

 

and call it delRow(this)