Aris bagus Aris bagus - 3 months ago 18
HTML Question

How to dynamic delete table row with jquery

How to dynamic delete row ?

sorry i fail to embed

jsfiddle
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>' +
        '</tr>');
});
$(document).on('click', '.btn', function() {
    $(this).parent().parent('tr').remove();
});
input {
    width: 100%;
}

.add {
    float: right;
    margin-right: 10px;
    margin-top: 50px
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn add">
    <i class="fa fa-plus"></i> add
</button>
<table class="table">

    <thead>
        <tr>
            <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>

        </tr>
    </thead>

    <tbody>
        <tr>
            <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
                </button>
            </td>
        </tr>
    </tbody>
</table>