CODEWITHSUNDEEP
jquery
srk
srk

Reputation: 5126

Remove last td from a tr

I am trying to add a new td upon mouse over of a tr. I tried the following way, which is removing the complete tr. I have a simple table as shown below.

<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
      </tr>
   </tbody>
</table>

I am trying to add a new td upon mouse over on a any of the tr. Below is my jQuery Code.

$(document).ready(function() {
    var trIndex = null;
    $('#example tr td').hover(function() {
        //on mouse over
        trIndex = $(this).parent().append("<td>Hello</td>"); //id='test'
    }, function() {
        //on mouse release
        $(trIndex).remove();//this is removing the complete tr which was previously mouse overed
    });
});

I have tried the following way, which has no effect.

$(trIndex).remove("td:last-child");

How to remove the td?

Upvotes: 1

Views: 9458

Answers (5)

Jayababu
Jayababu

Reputation: 1621

Your trIndex will point to the tr which is hovered.so from there you need to find the last tr.Please find the below snippet.working fine.

Code Snippet:

$(document).ready(function() {
    var trIndex = null;
    $('#example tr td').hover(function() {
        //on mouse over
        trIndex = $(this).parent().append("<td>Hello</td>"); //id='test'
    }, function() {
        //on mouse release
        $(trIndex).find('td:last').remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Tiger Nixon</td>
         <td>System Architect</td>
      </tr>
      <tr>
         <td>Garrett Winters</td>
         <td>Accountant</td>
      </tr>
      <tr>
         <td>Ashton Cox</td>
         <td>Junior Technical Author</td>
      </tr>
   </tbody>
</table>

Upvotes: 0

Abhishek Jain
Abhishek Jain

Reputation: 2977

In your code, you are binding event to td and not tr. Try this. Working plunker here

$(document).ready(function() {
  var trIndex = null;
  $('#example tr').hover(function() {
    //on mouse over
    trIndex = $(this).append("<td>Hello</td>"); //id='test'
    console.log(trIndex);
  }, function() {
    //on mouse release
    $(trIndex).find('td:last-of-type').remove(); //this is removing the complete tr which was previously mouse overed
  });
});

Upvotes: 0

Harsha Biyani
Harsha Biyani

Reputation: 7268

Try this: 

$("#id th:last-child, #id td:last-child").remove();

Upvotes: 1

Razack
Razack

Reputation: 950

please try

$('#example tr:last').remove();

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

because $(this).parent().append("<td>Hello</td>"); returns the tr element so trIndex is referring to the tr element

$(document).ready(function () {
    $('#example tr').hover(function () {
        $(this).append("<td>Hello</td>"); //id='test'
    }, function () {
        $(this).find('td:last-child').remove();
    });
});


$(document).ready(function() {
  $('#example tr').hover(function() {
    $(this).append("<td>Hello</td>"); //id='test'
  }, function() {
    $(this).find('td:last-child').remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
    </tr>
  </tbody>
</table>

Upvotes: 5

Related Questions