Aris bagus Aris bagus - 9 months ago 30
HTML Question

How to dynamic delete table row with jquery

How to dynamic delete row ?

sorry i fail to embed

to post

my fiddle code here

Answer Source

use jquery on click

$(document).on('click', '.btn', function() { $(this).parent().parent('tr').remove(); });

$('.add').on('click', function() {
    $('tbody').append('<tr>' +
        '<td class="col-xs-1"><input type="text" class="no"></td>' +
        '<td class="col-xs-4"><input type="text" class="item"></td>' +
        '<td class="col-xs-5"><input type="text" class="description"></td>' +
        '<td class="col-xs-2">' +
        '<button class="btn">' +
        '<i class="fa fa-trash-o"></i>' +
        'Delete' +
        '</button>' +
        '</td>' +
$(document).on('click', '.btn', function() {
input {
    width: 100%;

.add {
    float: right;
    margin-right: 10px;
    margin-top: 50px
<link href="" rel="stylesheet"/>
<link href="" rel="stylesheet"/>
<script src=""></script>
<script src=""></script>
<button class="btn add">
    <i class="fa fa-plus"></i> add
<table class="table">

            <th class="col-xs-1">No</th>
            <th class="col-xs-4">Item</th>
            <th class="col-xs-5">description</th>
            <th class="col-xs-2">Action</th>


            <td class="col-xs-1">1</td>
            <td class="col-xs-4">Lipsum</td>
            <td class="col-xs-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea earum hic accusamus, reprehenderit recusandae, quisquam consequatur quasi eum cum, nam atque aperiam at? Veniam cupiditate, commodi numquam voluptates dicta nisi.</td>
            <td class="col-xs-2">
                <button class="btn">
                    <i class="fa fa-trash-o"></i> Delete

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download