CODEWITHSUNDEEP
jqueryhtml
Vasantha Raj
Vasantha Raj

Reputation: 647

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.

Upvotes: 0

Views: 5377

Answers (6)

Optimus
Optimus

Reputation: 2210

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

Upvotes: 0

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

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

Upvotes: 0

Abhishek Sharma
Abhishek Sharma

Reputation: 300

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>

Upvotes: 0

Vince
Vince

Reputation: 3286

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

Upvotes: 3

Jason Jong
Jason Jong

Reputation: 4330

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();
    });
});

Upvotes: 0

stanze
stanze

Reputation: 2480

Try this fiddle.

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

Upvotes: 1

Related Questions