remove row on click on specific td of that row by jquery

Question

i have an table

<table class="oldService">
    <thead>
           <th>name</th>
           <th>age</th>
           <th>action</th>
    </thead>    
    <tbody>
    <?php foreach($array as $k=>$v){ ?>       
          <tr>
              <td><?php echo $k[name] ?></td>
              <td><?php echo $k[age]?></td>
              <td id="<?php $k[id]" class="delme">X</td>
          </tr>
    <?php } ?>        
    </tbody>
<table>

now i want to delete any row by clicking on X of each row except first and last row, and also need to confirm before deletion.

i used below jquery

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('table.oldService>tbody tr').not(':first').not(':last').click(function(){
    if(confirm('want to delete!')){
    jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() { 
            jQuery(this).remove()}));
    jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
    }
    else return false;});
});

</script>

this is working perfect,but it execute by click on that row( means any td), i want that this event only occour when user click on X(third td) . please suggest me how to modify this jquery so that the event occur on click of X.

UPDATE: i want that minimum one row should be in tbody, means if there is only one row then no function to delete that row, and if there is many rows then any row he can delete but not the all rows.

Answer 1

I didn't implement all your animation and AJAX logic, but here is how you could do this in general:

$(function() {
    $('table.oldService td.delme:not(:first):not(:last)').click(function() {
       $(this).closest('tr').remove(); 
    });
});

Also, I highly recommend you run your code through JSLint. The code sample you posted has a massive number of errors in it.

Answer 2

Try this :

    <script type="text/javascript">
        jQuery(document).ready(function(){
    jQuery('table.oldService>tbody tr img.delete').not(':first').not(':last').click(function () {
        if(confirm('want to delete!'))
        {
          jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() { 
                jQuery(this).parent().parent().remove()}));
          jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
        }
        else return false;});
    });
</script>

html :

<table class="oldService">
        <thead>
               <th>name</th>
               <th>age</th>
               <th>action</th>
        </thead>    
        <tbody>
        <?php foreach($array as $k=>$v){ ?>       
              <tr>
                  <td><?php echo $v['name'] ?></td>
                  <td><?php echo $v['age']?></td>
                  <td><img id="<?php echo $v['id']?>" class="delete" src="del.gif" /></td>
              </tr>
        <?php } ?>        
        </tbody>
<table>

Answer 3

You can do this with a bit less code like this:

jQuery('table.oldService').delegate('td.delme', 'click', function() {
    if(jQuery(this).parent().siblings(":not(.del)").length === 0) return;
    if(!confirm('want to delete!')) return;

    jQuery.get('deleteService.php', { id:this.id });
    jQuery(this).parent().addClass('del').fadeTo(400, 0, function() {
        jQuery(this).remove();
    });
});​

This attaches one event handler for the table instead of 1 per <td>. First we check if there are any siblings left that aren't deleted (prevent last deletion). Then check if they confirm, then delete the row.

You also need a few html fixes based on the posted question. The last tag needs to be </table> instead of <table>, and those <td> elements in the <thead> need to be wrapped in <tr></tr>. Let me know if you have any trouble, you can see a working demo of this here.