JavaScript Remove Table Row Dynamically

Question

I'm trying to remove row from my dynamic table. I've success to .append new row from JavaScript.

JavaScript

$(document).ready(function() {
    // table #pos add-row
    $(".add-row").keypress(function(e) {
        if (e.which == 13) {

            var barcode = $("#barcode").val();
            $.ajax({
                type: "post",
                url: "production/ajax/load.php",
                dataType: "json",
                data: {
                    barcode: $("#barcode").val()
                },
                success: function(data) {
                    $("#pos tbody").append(data['content']);
                }
            });
        }
    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        alert('Success');
        $("#pos tbody tr").remove();
    });
})

load.php

    <?php
if (isset($_POST['barcode'])) {
    require '../controller/connection/connection-management.php';

    $barcode = $_POST['barcode'];
    $status = false;

    $sql = "SELECT code, title, wri_name, pub_name, year, main_category.main_category, category.category, call_number, pusat_penerbit, mrican, paingan, selling_price, discount FROM product, writer, publisher, main_category, category WHERE product.writer = writer.writer AND product.publisher = publisher.publisher AND product.main_category = main_category.main_category AND product.category = category.category AND code = '{$barcode}' ORDER BY title";
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) == 1) {
        while($row = mysqli_fetch_assoc($result)) {
            $barcode = $row['code'];
            $title = $row['title'];
            $sellingPrice = number_format($row['selling_price'], 0, ',', '.');
            $quantity = 1;
            $discount = $row['discount'];
            $total =  number_format((($row['selling_price'] - ($row['selling_price'] * ($discount / 100))) * $quantity), 0, ',', '.');

            $append = "<tr class='pointer'>
                <td align='right'><a href='javascript:;' class='delete-row'><i class='fa fa-trash'></i></a></td>
                <td><small>{$barcode}</small></td>
                <td><div style='text-align: justify'><strong>{$title}</strong></div></td>
                <td align='right'>{$sellingPrice}</td>
                <td align='center'><input id='quantity' type='text' class='form-control' style='text-align:center' value='1'></td>
                <td align='center'><input type='text' class='form-control' style='text-align:center' value='{$discount}'></div></td>
                <td align='right'>{$total}</td></td>
            </tr>";
        }
        $status = true;
    }

    $data = array(
        "status" => $status,
        "content" => $append
    );

    echo json_encode($data);
}
?>

pos.php it's html table

<div class="x_title">
    <div class="input-group">
        <span class="input-group-btn">
        <button type="button" class="delete-row btn btn-primary"><i class="fa fa-pencil-square-o"></i></button>
    </span>
        <input name="barcode" id="barcode" type="text" class="add-row form-control" placeholder="Enter item name or scan barcode">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Receive</button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li><a href="#">Receive</a></li>
                <li><a href="#">Return</a></li>
                <li><a href="#">Purchase Order</a></li>
                <li><a href="#">Transfer</a></li>
                <li><a href="#">Store Account Payment</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="x_content">
    <div class="table-responsive">
        <table name="pos" id="pos" class="table table-striped jambo_table bulk_action">
            <thead>
                <tr class="headings">
                    <th style="text-align:center" class="column-title col-sm-7" colspan="3">Item Name </th>
                    <th style="text-align:right" class="column-title col-sm-1">Cost </th>
                    <th style="text-align:center" class="column-title col-sm-2">Qty. </th>
                    <th style="text-align:center" class="column-title col-sm-1">Disc % </th>
                    <th class="column-title col-sm-1" style="text-align:right">Total </th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>

So when I add new row in the table, everything works fine like this picture:

But when I click trash icon with class='delete-row', that's is not working. So I think, when I append data to table tbody it's not read class or id from the new row.

Please someone help. I can't find any similar questions like mine. I just want to know, how to remove table row when I click trash icon from JavaScript.

Answer 1

You have two issues here (which is why I have not voted to close as a duplicate). Firstly you need to use a delegated event handler on the .delete-row element as it is appended to the DOM after load. Your current code does nothing as you attempt to attach the event handler before the element exists.

Secondly, you need to use DOM traversal to remove only the parent tr of the clicked button. At the moment your code would remove all rows. Try this:

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

Answer 2

Did you tried delegate?

$(document).delegate('.delete-row', 'click', function(){
 //your remove code here
}); 

You can also use on (for jquery versions 1.7.1+)

$(document).on('click', '.delete-row', function(){ 
 //your remove code here
});