Question

我的代码附在下面。

＆＃13;

$('#aprod').on('click', function() {
    $('#ln1').clone().appendTo('#page3_inside');
    prodnum = prodnum + 1;
    $('#conf_prodnum').val(prodnum);
});

$('body').on('click', '.del', function() {
 	$(this).closest('tr').remove();
});

＆＃13;

<html>
<head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
    <form>
        <input type='button' value='Add Another Product' id='aprod' />
    </form>
    <table id='page3_inside'>
        <tr id='ln1'>
            <td>
                <label for="product_name">Product Name</label>
                <br />
                <select class='input name_of_product' style='width:150px; height:34px;' name="name_of_product[]">
                    <option value="">Select from List</option>
                </select>
            </td>
            <td>
                <label for="product_cat">Product Category</label>
                <br />
                <input type='text' class="input product_category" name="product_category[]"
                style="font-family:verdana; width:150px; border: 1px solid #000000;" readonly="readonly" />
            </td>
            <td>
                <label for="qty">Qty</label>
                <br />
                <input type="text" value="" class="input qty" style="width:100px;" name="qty[]" placeholder="Qty"
                onkeypress="return isNumberKey(event)" />
            </td>
            <td>
                <label for="unit">Unit</label>
                <br />
                <input type='text' class="input unit" style="width:100px;" name="unit[]" readonly="readonly" />
            </td>
            <td>
                <label for="brand">PO Number</label>
                <br />
                <input type="text" value="" class="input po" name="po[]" placeholder="PO Number"
                style='width:150px; height:28px;' />
            </td>
            <td>
                <img src='http://www.oasisservicedoffices.co.uk/wp-content/uploads/2014/08/Delete-button-150x150.jpg'
                class='del' width='30px' style='cursor:hand;cursor:pointer;' />
            </td>
        </tr>
    </table>
</body>
</html>

＆＃13;

$('body').on('click', '.del', function() {
   $(this).closest('tr').remove();
});

我为附加元素创建了一个删除按钮。但正如您所看到的，第一行有一个删除按钮。我想要做的是删除该删除按钮，并只在按下“添加另一个产品”时显示在下一行。按钮。

 $('#aprod').on('click', function() {
   $('#ln1').clone().appendTo('#page3_inside');
   prodnum = prodnum + 1;
   $('#conf_prodnum').val(prodnum);
});

Answer 1

你可以用css隐藏第一个删除按钮

table tr:first-child .del{
    display: none;
}

DEMO

Answer 2

如果您只需要delete按钮到最后一个元素：

$('#aprod').on('click', function() {
    var el = $('#page3_inside tr:last').clone()
    $('#page3_inside').find('.del').remove();
    el.appendTo('#page3_inside');
    prodnum = prodnum + 1;
    $('#conf_prodnum').val(prodnum);
});

$('body').on('click', '.del', function() {
    $(this).closest('tr').remove();
});

演示：http://jsfiddle.net/tusharj/f772sovm/8/

Answer 3

您可以直接在JS中附加img。从HTML中删除它。

$('#aprod').on('click', function() {
    var i=$('#ln1').clone().appendTo('#page3_inside');
    i.append('<img src="http://www.oasisservicedoffices.co.uk/wp-content/uploads/2014/08/Delete-button-150x150.jpg" class="del" width="30px" style="cursor:hand;cursor:pointer;">')
    prodnum = prodnum + 1;
    $('#conf_prodnum').val(prodnum);
});

的 Fiddle 的

Answer 4

你可以试试这个

$( "#page3_inside table" ).first().find('img').css("display", "none");

将删除按钮添加到附加元素

4 个答案: