I have a table in bootstrap - how can I add a column that contains remove button for selected row?

Question

I created a table in bootstrap, basically it contains different columns and rows, eg:

<thead>
    <tr>
        <th>Location</th>
        <th>Date</th>
        <th>Time</th>
        <th>Duration</th>
        <th>Content</th>
        <th>Remove</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center">4</td>
        <td class="center">X</td>
        <td class="center">Remove</td>
    </tr>
    <tr class="even gradeC">
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td class="center">5</td>
        <td class="center">C</td>
        <td class="center">Remove</td>
    </tr>
    (...)

So far the last column contains static 'Remove' string. Is there a way of dynamically removing the row when the user hits the remove link there?

here is my fiddle: http://jsfiddle.net/fyw6kajm/1/

Answer 1

Or you can wrap your Remove in last td inside an anchor tag with some class name given to it, say remove and write a click event to that class.

Ex:

HTML

<tr class="odd gradeA">
     <td>Trident</td>
     <td>Internet Explorer 5.5</td>
     <td>Win 95+</td>
     <td class="center">5.5</td>
     <td class="center">A</td>
     <td class="center"><a class='remove' href="#">Remove</a></td> <!--wrap in anchor tag-->
</tr>
<tr class="even gradeA">
     <td>Trident</td>
     <td>Internet Explorer 6</td>
     <td>Win 98+</td>
     <td class="center">6</td>
     <td class="center">A</td>
     <td class="center"><a class='remove' href="#">Remove</a></td>
</tr>

JS

$('.remove').on('click',function(){
   $(this).closest('tr').remove(); //remove its root parent tr using closest
});

if the contents are dynamically added you can do event delegation as below:

$("#dataTables-example").on('click','.remove',function(){
   $(this).closest('tr').remove(); //remove its root parent tr using closest
});

DEMO

Answer 2

You can have delegated click event on last td of row or the row that contains text remove along with .closest() and .remove() for traversing to closest row and removing it respectively:

$('body').on('click','td:contains(Remove)',function(){
  $(this).closest('tr').remove();
});

Working Demo

Answer 3

Make the buttons.

 $("#trigger-overlay2").click(function() { // $(this).toggleClass("active"); $(".overlay-boxify2").toggleClass("open"); }); $(document).on('click','.tr_remove',function(e){ e.preventDefault(); $(this).parents('tr').remove(); }); 

 .overlay-boxify, .overlay-boxify2 { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } .overlay-boxify.open, .overlay-boxify2.open { visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index:9999; } .overlay2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/grid.png); background: rgba(222, 222, 222, 0.95); overflow: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="trigger-overlay2" href="#contact">Trigger!</a> <div class="overlay2 overlay-boxify2"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> <div class="tos-logo-contact"> <img src="../img/logo.png"></a> </div> <div class="panel-body"> <div class="dataTable_wrapper"> <table class="table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th>Location</th> <th>Date</th> <th>Time</th> <th>Duration</th> <th>Content</th> <th>Remove</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center">4</td> <td class="center">X</td> <td class="center tr_remove">Remove</td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> <td class="center tr_remove">Remove</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="even gradeA"> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="even gradeA"> <td>Trident</td> <td>AOL browser (AOL desktop)</td> <td>Win XP</td> <td class="center">6</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 2.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 3.0</td> <td>Win 2k+ / OSX.3+</td> <td class="center">1.9</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.0</td> <td>OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.5</td> <td>OSX.3+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape 7.2</td> <td>Win 95+ / Mac OS 8.6-9.2</td> <td class="center">1.7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape Browser 8</td> <td>Win 98SE+</td> <td class="center">1.7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape Navigator 9</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.0</td> <td>Win 95+ / OSX.1+</td> <td class="center">1</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.1</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.1</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.2</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.2</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.3</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.3</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> 

Answer 4

This removes the entire tr/row-element and its children, but you should assign a class to your remove button that is specific to this function, eg js_remove_row. Because this handle: "tr > td:last-child" could target other stuff if you change your table. Notice the js-prefix which lets you know that this class is a javascript-handler and not used for styling. I also use $(document).on... because if doesn't break if you ajax-load part of your page or table, document is always there and you don't have to reset the handler if reloading your content.

This works:

$(document).on("click", "tr > td:last-child", function() {
  $(this).parent().remove(); 
});

This is better:

<td class="center js_remove_row">Remove</td>

$(document).on("click", ".js_remove_row", function() {
      $(this).parent().remove(); 
    });

Answer 5

You just need to add class to call click event on remove td and add click event to remove like below:

fiddle

<td class="center removetd">Remove</td>

Jquery:

$(".removetd").click(function(){
  $(this).closest("tr").remove();
});

Answer 6

Try attaching click event to tr element , using event.target , Node.textContent , calling $(this).remove() if event.target text is "Remove"

 $("tr").click(function(e) { if (e.target.textContent === "Remove") $(this).remove() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <th>Location</th> <th>Date</th> <th>Time</th> <th>Duration</th> <th>Content</th> <th>Remove</th> </tr> </thead> <tbody> <tr class="odd gradeX"> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center">4</td> <td class="center">X</td> <td class="center">Remove</td> </tr> <tr class="even gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> <td class="center">Remove</td> </tr> (...) </table>