How to remove a table row with jquery?
<p>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.</p>

<p>Now I have another table where the user deletes one row at a time. So I thought I would do the same thing.</p>

<pre><code>('#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();
});
</code></pre>

<p>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()); </p>

<p>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.</p>

<p>So to me these both are the same since they both spit out a table row. But the one in jquery loop works.</p>

<p>Where are the "row" way does not. What happens is it deletes all rows in the table.</p>

<p>I don't understand why..</p>

<p>Thanks</p>

<p>Edit here is the table. I think it is this jquery alert plugin that is killing "this"</p>

<p>found here <a href="http://abeautifulsite.net/notebook/87" rel="nofollow">http://abeautifulsite.net/notebook/87</a></p>

<pre><code>&lt;%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %&gt;

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style type="text/css"&gt;
        #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;
        }
    &lt;/style&gt;

    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript" src="../../Scripts/jquery.alerts.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;table class="class" id="MyTable"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    Header 1
                &lt;/th&gt;
                &lt;th&gt;
                    Header 2
                &lt;/th&gt;
                &lt;th&gt;
                    Header 3
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;a&gt;
                        &lt;img alt="" src="img1"&gt;a&lt;/a&gt;&lt;a&gt;&lt;img alt="" src="img2"&gt;b&lt;/a&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    1
                &lt;/td&gt;
                &lt;td&gt;
                    2
                &lt;/td&gt;
                &lt;td&gt;
                    3
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;a&gt;
                        &lt;img alt="" src="img1"&gt;&lt;/a&gt;c&lt;a&gt;&lt;img alt="" src="img2"&gt;d&lt;/a&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    4
                &lt;/td&gt;
                &lt;td&gt;
                    5
                &lt;/td&gt;
                &lt;td&gt;
                    6
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;script type="text/javascript"&gt;
    $(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();
                    });
                }
            });

        });
    });
&lt;/script&gt;
</code></pre>

<p>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).</p>

<p>// In the same controller. Index View has all the above html. Test is what is being called.</p>

<pre><code>   public ActionResult Index()
        {
            return View();
        }
         public ContentResult Test()
        {
            return Content("hi");
        }
</code></pre>
