chobo2
chobo2

Reputation: 85765

How to remove a table row with jquery?

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

Upvotes: 0

Views: 6293

Answers (4)

Mottie
Mottie

Reputation: 86413

Try using "closest" tr:

('#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 = $(this).closest('tr');

   // do some ajax stuff
   $(row).remove();
});

Upvotes: 0

David Andres
David Andres

Reputation: 31781

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.

Upvotes: 0

David Andres
David Andres

Reputation: 31781

Try the following basic HTML and see if the second row is removed. It should convince you that row.remove() does work and that perhaps something else is failing.

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Test bed</title>
 </head>
 <body> 
  <table>
   <tr>
    <td>1</td>
    <td>2</td>
   </tr>
   <tr id="test">
    <td>3</td>
    <td>4</td>
   </tr>
  </table>
 </body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready
 (
  function()
  {
   $("tr#test").remove();
  }
 ); 
</script>

Upvotes: 0

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

try:

var row = $(this).parents('tr');//use this to get current row

// do some ajax stuff
$(row).remove();

Upvotes: 1

Related Questions