How to delete a current row by clicking row' delete button in html table?

I am new jquery and in my project The rows will gets updated dynamically.

Now my question is how to delete a row when we click that rows delete button. Kindly some one help me to do this.

<table class="table table-striped table-bordered table-hover table-condensed tableSiteUser"> <thead> <tr> <th>#</th> <th>SiteName</th> <th>UserName</th> <th>Channel</th> <th>Action</th> </tr> </thead> <tbody id="site-table-body"> <tr> <td class="countsiteuser">1</td> <td><select class="form-control"><option>www.google.com</option> <option>www.yahoo.com</option> <option>www.flipkart.com</option> <option>www.gamil.com</option></select></td> <td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" placeholder="Default"></td> <td><input type="text" class="form-control" placeholder="Enter the Channel"></td> <td><span class="form-control glyphicon glyphicon-trash siteUserrow-remover1"></span></td> </tr> <tr> <td class="beer" contenteditable="false">2</td> <td><select class="form-control"><option>www.google.com</option> <option>www.yahoo.com</option> <option>www.flipkart.com</option> <option>www.gamil.com</option></select></td> <td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" disabled="" placeholder="Default"></td> <td><input type="text" class="form-control" placeholder="Enter the Channel"></td> <td><span class="glyphicon glyphicon-trash form-control row-remover"2=""></span></td> </tr> <tr> <td class="beer" contenteditable="false">3</td> <td><select class="form-control"><option>www.google.com</option> <option>www.yahoo.com</option> <option>www.flipkart.com</option> <option>www.gamil.com</option></select></td> <td><input type="checkbox" value="user" id="checkboxbutton"><input type="text" class="and" disabled="" placeholder="Default"></td> <td><input type="text" class="form-control" placeholder="Enter the Channel"></td> <td><span class="glyphicon glyphicon-trash form-control row-remover"3=""></span></td> </tr> </tbody> </table>

Please provide me some jsfiddle examples.

-------------Problems Reply------------

You can find the containing <tr> by using jQuery's .closest() function. This walks up the DOM hierarchy until it finds an element that matches the provided selector.

$('span.glyphicon-trash').on('click', function() {
$(this).closest('tr').remove();
});

Checkout this jsFiddle: http://jsfiddle.net/voveson/0vhg0c7m/

See the docs for .closest(): here

Try this fiddle.

$('.row-remover').on('click', function() {
$(this).closest('tr').remove();
})

Looks like the class glyphicon-trash is the delete row. You can use the following query code

$(function() {
$('.glyphicon-trash').on('click', function() {
// remove the current TR
$(this).closest('tr').remove();
});
});

Use same class name for all action span, your first span use class 'siteUserrow-remover1' and other span use row-remover. Use same class name for all span that used for delete action

Also include latest jquery as older jquery did not support 'on' function

Here is working example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.row-remover').on('click', function() {
$(this).closest('tr').remove();
})
});
</script>
<style>
.row-remover{ border:1px solid #ddd;}
</style>
<table
class="table table-striped table-bordered table-hover table-condensed tableSiteUser">
<thead>
<tr>
<th>#</th>
<th>SiteName</th>
<th>UserName</th>
<th>Channel</th>
<th>Action</th>
</tr>
</thead>
<tbody id="site-table-body">
<tr>
<td class="countsiteuser">1</td>
<td><select class="form-control"><option>www.google.com</option>
<option>www.yahoo.com</option>
<option>www.flipkart.com</option>
<option>www.gamil.com</option></select></td>
<td><input type="checkbox" value="user" id="checkboxbutton"><input
type="text" class="and" placeholder="Default"></td>
<td><input type="text" class="form-control"
placeholder="Enter the Channel"></td>
<td><span class="form-control glyphicon glyphicon-trash siteUser row-remover">delete</span></td>
</tr>
<tr>
<td class="beer" contenteditable="false">2</td>
<td><select class="form-control"><option>www.google.com</option>
<option>www.yahoo.com</option>
<option>www.flipkart.com</option>
<option>www.gamil.com</option></select></td>
<td><input type="checkbox" value="user" id="checkboxbutton"><input
type="text" class="and" disabled="" placeholder="Default"></td>
<td><input type="text" class="form-control"
placeholder="Enter the Channel"></td>
<td><span class="glyphicon glyphicon-trash form-control row-remover">delete</span></td>
</tr>
<tr>
<td class="beer" contenteditable="false">3</td>
<td><select class="form-control"><option>www.google.com</option>
<option>www.yahoo.com</option>
<option>www.flipkart.com</option>
<option>www.gamil.com</option></select></td>
<td><input type="checkbox" value="user" id="checkboxbutton"><input
type="text" class="and" disabled="" placeholder="Default"></td>
<td><input type="text" class="form-control"
placeholder="Enter the Channel"></td>
<td><span class="glyphicon glyphicon-trash form-control row-remover">delete</span></td>
</tr>
</tbody>
</table>

Since the rows are adding dynamically, use EVENT DELEGATION for this:

$(document).on('click', 'table.tableSiteUser tr td:last', function() {
$(this).closest('tr').remove();
});

FIDDLE

use closest method to find the tr and use remove method to remove the tr

$(function () {
$("body").on('click', '.row-remover', function() {
$(this).closest('tr').remove();
});
});

try this fiddle

Category:jquery Views:1 Time:2018-07-11
Tags: jquery html5

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.142 (s). 11 q(s)