Deleting table rows

All I want to do is be able to put a delete row link on each row - it works fine at first, but if you delete an earlier row then try and delete a later one it messes up the counting - thoughts please?

var th_visible = 0;
var rowcount = 1;
var delcount = 0;

filter_added = new Array(); //define filter_added array

function add_filter() {
var the_filter = document.cs_form.filterlist.value;

// check not null
if (the_filter != 0) {

// check for headers row
if (th_visible != 1) {
document.getElementById("cs_headers").style.visibility = "visible";
th_visible = 1;
}

//if (filter_added[the_filter] != 1) {

var x=document.getElementById('cs_table').insertRow(-1);

var a=x.insertCell(0);
var b=x.insertCell(1);
var c=x.insertCell(2);
var d=x.insertCell(3);

a.innerHTML = lists[the_filter][0];
b.innerHTML = lists[the_filter][1];
c.innerHTML = lists[the_filter][2];
d.innerHTML = '<a href="#" onClick="remove_filter('+rowcount+')">X</a>';

rowcount++; //increase row count by 1

filter_added[the_filter] = 1; //set variable to identify filter

//} else { alert("Filter already added!"); } //end if filter already added

} else { alert("Please select a filter from the dropdown box"); } //end if filter not null

} //end add_filter function

function remove_filter(row) {
var x=document.getElementById('cs_table');
x.deleteRow(row-delcount);
delcount++;
return delcount;
             }

Open in new window

anonwigAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
You may use << this >> and << parentNode >> keywords :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	function remove_filter(mylink) {
		document.getElementById('cs_table').getElementsByTagName('tbody')[0].removeChild(mylink.parentNode.parentNode);	
	}
</script>
</head>
<body>
<table border="1" id="cs_table">
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
<tr><td>I'm bad news</td><td><a href="javascript:void(0)" onclick="javascript:remove_filter(this)">Delete</a></td></tr>
</table>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Each time you delete a row, the next row take its index. So generaly you don't need to increment a counter to delete the next row.
0
 
anonwigAuthor Commented:
How do I access the rows index for putting in the delete link?
0
 
anonwigAuthor Commented:
Thank you - you genius
0
All Courses

From novice to tech pro — start learning today.