CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
alok shreevathsa
alok shreevathsa

Reputation: 57

How to delete a selected row in a html table by using jQuery?

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

Upvotes: 1

Views: 18467

Answers (4)

Owais Aslam
Owais Aslam

Reputation: 1589

You can do it like this as well

Html

<script src="https://ajax.googleapis.com/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

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

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.com/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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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.com/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>

Upvotes: 1

Pawan B
Pawan B

Reputation: 4623

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

Upvotes: 0

Related Questions