I'm trying to delete a selected row in a table using jQuery.

This is my html markup:

<table id="resultTable">
 <tr id="first">
  <td>c1</td>      
  <td>c2</td>      
 </tr>
 <tr id="second">
  <td>c3</td>      
  <td>c4</td>      
  </tr>    
</table>
<button id="del">Clear</button>

This is the script I'm using..

<script>
$(document).ready(function () {   
     var tid="";   

     $('#resultTable tr').click(function (event) {
        tid=$(this).attr('id');
          alert(tid); //trying to alert id of the clicked row   
     });

     $("#del").click(function(){
     alert("removing "+ tid);
            $(tid).remove();    
     });
 });
</script>

I'm declaring a global variable "tid" to obtain "rowId" and using the same variable in both click() function. But I'm unable to delete the corresponding row, please help me

I'm trying to delete a selected row in a table using jQuery.

This is my html markup:

<table id="resultTable">
 <tr id="first">
  <td>c1</td>      
  <td>c2</td>      
 </tr>
 <tr id="second">
  <td>c3</td>      
  <td>c4</td>      
  </tr>    
</table>
<button id="del">Clear</button>

This is the script I'm using..

<script>
$(document).ready(function () {   
     var tid="";   

     $('#resultTable tr').click(function (event) {
        tid=$(this).attr('id');
          alert(tid); //trying to alert id of the clicked row   
     });

     $("#del").click(function(){
     alert("removing "+ tid);
            $(tid).remove();    
     });
 });
</script>

I'm declaring a global variable "tid" to obtain "rowId" and using the same variable in both click() function. But I'm unable to delete the corresponding row, please help me

• javascript
• jquery
• html
• html-table

Share Improve this question Follow edited Sep 27, 2016 at 20:51 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Sep 27, 2016 at 6:43 alok shreevathsaalok shreevathsa 5722 gold badges22 silver badges1111 bronze badges 2

• you miss '#' in '$(tid)' – Anan Commented Sep 27, 2016 at 6:49
• Check my answer to see a generalized practice for delete selected item. stackoverflow./a/39718072/6608101 – Mohit Tanwani Commented Sep 27, 2016 at 8:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Concatenate # to make it valid ID selector, without #, jQuery will look for <first>/<second> elements

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
  });
  $("#del").click(function() {
    console.log(tid);
    if ($('#' + tid).length) {
      $('#' + tid).remove();
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="resultTable">
  <tr id="first">
    <td>c1</td>
    <td>c2</td>
  </tr>
  <tr id="second">
    <td>c3</td>
    <td>c4</td>
  </tr>
</table>
<button id="del">Clear</button>

You missed # with element id

     $("#del").click(function(){
            alert("removing "+ tid);
            $('#' + tid).remove();    // you need to add #
     });

Check this jsfiddle

You can learn more on remove in jquery from here

IMO, you don't require any clear button over there.

As you said, you want to delete a selected row,
Try to use confirm box for user inputs to delete a particular element.

If you would like use global delete for multiple selected elements, you can use check-box for each row and push them into a single variable, once user clicks on clear / delete button delete all selected rows. That will be a good practice.

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
    console.log(tid);
    if(confirm("Are you sure, you want to delete : "+tid))
    {
      $('#'+tid).remove();  
    }  
  });
});

$(document).ready(function() {
  var tid = "";
  $('#resultTable tr').click(function(event) {
    tid = $(this).attr('id');
    console.log(tid);
    if(confirm("Are you sure, you want to delete : "+tid))
    {
      $('#'+tid).remove();  
    }  
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="resultTable">
  <tr id="first">
    <td>c1</td>
    <td>c2</td>
  </tr>
  <tr id="second">
    <td>c3</td>
    <td>c4</td>
  </tr>
</table>

You can do it like this as well

Html

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <table id="resultTable">
   <tr id="first">
     <td>c1</td>
     <td>c2</td>
    </tr>
   <tr id="second">
     <td>c3</td>
     <td>c4</td>
   </tr>
 </table>
 <button id="del">Clear</button>

JQuery

$(document).ready(function() {
  var tid = "";
   $('#resultTable tr').on('click',function () {
    tid = '#'+ $(this).attr('id');
   });
   $("#del").click(function() { 
    if ($(tid).length > 0) {
    $(tid).remove();
     }
   });
});

check code on JsFiddle