向添加的元素中添加删除按钮

Question

向添加的元素中添加删除按钮

4

下面是我的代码。

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

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

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

- Kim Carlo

你期望不显示关于最后一个的所有内容，还是只有第一个不应该显示？ - Dwza

或者，您可以考虑在行不为空（即尚未填写任何内容）时显示删除按钮，并在至少有一个空行时禁用添加按钮。 - Ja͢ck

4个回答

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

Demo: http://jsfiddle.net/tusharj/f772sovm/8/

- Tushar

当您删除第一行然后添加另一个产品时，它不起作用。 - Nagaraj S

1

你可以直接在JS中添加标签。从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);
});

小提琴

（注意：保留了HTML标记）

- Zee

0

你可以试试这个

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

- Codelord

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin F · Accepted Answer

您可以使用CSS隐藏第一个删除按钮。

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

DEMO