I am having problems when it comes to removing a row from a table. I have 2 tables one requires me to delete X amount of rows so I used jquery.each and in the each loop I just went $(value).remove() and it works.
Now I have another table where the user deletes one row at a time. So I thought I would do the same thing.
('#MyTable tbody tr td img:even').click(function()
{
// check if they are sure if they want to delete. If true go on
// now get this row they clicked on
var row = $('#MyTable tbody tr td img:even').parents('tr');
// do some ajax stuff
$(row).remove();
});
So I thought this would work since it is similar to what I did with the jquery loop. I checked what is in the “row” by doing alert($(row).html());
This produces the row in question I want to deleted. I did the same thing to “value” in the jquery each loop(table I have). It also contains the row in question to delete.
So to me these both are the same since they both spit out a table row. But the one in jquery loop works.
Where are the “row” way does not. What happens is it deletes all rows in the table.
I don’t understand why..
Thanks
Edit here is the table. I think it is this jquery alert plugin that is killing “this”
found here http://abeautifulsite.net/notebook/87
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#popup_container
{
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title
{
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(Images/Alerts/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content
{
background: 16px 16px no-repeat url(Images/Alerts/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert
{
background-image: url(Images/Alerts/info.gif);
}
#popup_content.confirm
{
background-image: url(Images/Alerts/important.gif);
}
#popup_content.prompt
{
background-image: url(Alerts/help.gif);
}
#popup_message
{
padding-left: 48px;
}
#popup_panel
{
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt
{
margin: .5em 0em;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.alerts.js"></script>
</head>
<body>
<table class="class" id="MyTable">
<thead>
<tr>
<th>
</th>
<th>
Header 1
</th>
<th>
Header 2
</th>
<th>
Header 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a>
<img alt="" src="img1">a</a><a><img alt="" src="img2">b</a>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a>
<img alt="" src="img1"></a>c<a><img alt="" src="img2">d</a>
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$('#MyTable tbody tr td a:odd').live("click", function()
{
jConfirm('Do you wish to delete?.', 'Deletion', function(d)
{
if (d == true)
{
var row = $(this).parents('tr');
// can maybe omit this. Problem might be with jConfirm.
$.post("Test", null, function(r)
{
row.remove();
});
}
});
});
});
</script>
Here is the controller(I am using asp.net mvc but you can switch to whatever since I don’t think the server side would be causing the problem).
// In the same controller. Index View has all the above html. Test is what is being called.
public ActionResult Index()
{
return View();
}
public ContentResult Test()
{
return Content("hi");
}
You’re can use DOM functions to remove table rows, as in:
Note that the parents function should return a jQuery wrapped set, so there is no need to wrap it again using code like $(row).
I believe I understand why you’re getting null row variables. You are not removing one row at a time. Rather, for each click you’re finding all img elements that match a selector and, for each of these, removing their parent table rows all in one shot.