Can't remove <tr> added via jQuery 'append'

这是JSFiddle http://jsfiddle.net/swordf1zh/BcHuS/13/，示例代码如下:

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

在JSFiddle的下面是一个可以添加到顶部的发票项目列表，但是在新添加的项目中，用于删除行的'x'按钮不起作用(当按下'x'按钮向右时可以删除发票中的初始项目)。