Home/ Questions/Q 358527
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T12:18:28+00:00

I am having problems when it comes to removing a row from a table.

  • 0

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");
        }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re can use DOM functions to remove table rows, as in:

    var row = $('#MyTable tbody tr td img:even').parents('tr');
var parentTableDOMElement = row.parents("table:first")[0];
parentTableDOMElement.deleteRow(row[0].rowIndex);

    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.

    • 0