Can't remove added via jQuery 'append'

Question

Here is the JSFiddle http://jsfiddle.net/swordf1zh/BcHuS/13/ and the sample code is below:

HTML

<h1>Invoice</h1>
<div class="panel-body">
    <div class="table-responsive">
        <table class="table table-condensed table-hover">
            <thead>
                <tr>
                    <td><strong>Product</strong></td>
                    <td class="text-center">
                        <strong>Price</strong>
                    </td>
                    <td></td>
                </tr>
            </thead>
            <tbody id="tabla-detalle">
                <tr class="detalle">
                    <td>Samsung Galaxy S5</td>
                    <td class="text-center item-reg">900</td>
                    <td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
                </tr>
                <tr class="detalle">
                    <td>Samsung Galaxy S5 Extra Battery</td>
                    <td class="text-center item-reg">250</td>
                    <td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
                </tr>
                <tr class="detalle">
                    <td>Screen protector</td>
                    <td class="text-center item-reg">300</td>
                    <td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<h1>Available products</h1>
<table class="table" id="search-items-table">
    <thead>
        <tr>
            <th>Product</th>
            <th class="text-center">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="list-item">
            <td class="list-item-name">iPhoneX</td>
            <td class="text-center list-item-reg">1000</td>
        </tr>
        <tr class="list-item">
            <td class="list-item-name">Tablet</td>
            <td class="text-center list-item-reg">350</td>
        </tr>
        <tr class="list-item">
            <td class="list-item-name">Item x</td>
            <td class="text-center list-item-reg">300</td>
        </tr>
        <tr class="list-item">
            <td class="list-item-name">Item y</td>
            <td class="text-center list-item-reg">450</td>
        </tr>
    </tbody>
</table>

<button type="button" class="btn btn-primary" id="btn-add-items">Add selected products to invoice</button>

JS

// Delete items from invoice when click on button x
$('.borrar-item').click(function() {
    $(this).closest('tr.detalle').remove();
});

// Select items from 'available products' list
$('.list-item').click(function(){
    $(this).toggleClass('success select2add');
});

// Add selected items from 'available products' to 'INVOICE'
$('#btn-add-items').click(function() {
    $('.select2add').each(function() {
        var name = $(this).children('td.list-item-name').text();
        var price = $(this).children('td.list-item-reg').text();
        $('#tabla-detalle').append('<tr class="detalle"><td>' +name+'</td><td class="text-center item-reg">'+price+'<td><button type="button" class="close borrar-item" aria-hidden="true">&times;</button></td></tr>');
    });
});

Below in the JSFiddle is a list items that can be added to the invoice on top, but in newly added items the 'x' button to remove the line is not working (the initial items in the invoice CAN be removed when pressing on the 'x' button to the right).

This is my first project using jQuery and Javascript and I have been researching for the last 3 hours trying to solve this issue without positive results, so I would like to see a little explanation of why my code is not working.

Thanks in advance for your help!

Answer 1

Because events are not magically added to new elements. Use event delegation.

$("#tabla-detalle").on("click", '.borrar-item', function() { 
    $(this).closest('tr.detalle').remove();
});