如何识别特定项目 <select>并在jquery中的每一行添加一个删除按钮

Question

1.）我创建了一个嵌套表，然后我想要做的是当我单击子表中的“删除”按钮时，它的行将被删除。

2.）我有<select>标签。 问题是我如何进行验证，检查一个客户是否已经选择了项目类型，但是也可以在下一个客户处选择此选定项目。

例如，Customer1选择Iron 。 现在，Customer1无法在下一个项目中选择Iron类型的项目。 Customer1也可以选择Copper或Wood但不能选择Iron 。 然后，如果我有Customer2，则可以选择Iron类型的Item。

这是我的代码：

  $(".addItem").on('click', function(e) { $(this).closest('table').find(".item:last").after('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>'); }); $(".addCustomer").on('click', function(e) { var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>'); var newCart = $('.cart:first').clone(true, true).wrap('td'); newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td></tr>'); $('.customer:last').append(newCart); e.preventDefault(); }); $('.itemType').on('change', function() { var selected = $(this)find('option:selected').val(); if ($(this).find('option:selected').val() === selected) { alert("Item already selected."); } }); 

  table, td, th { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <title>PO</title> <header> <form id="panel"> </form> </header> <section id="I"> <table id='PO1' class="purchaseOrder"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> <th>Gender</th> <th>Cart</th> </tr> </thead> <tbody> <tr id='C1' class='customer'> <td>Some Name</td> <td>30</td> <td>My Address</td> <td>Male</td> <td> <table class='cart'> <thead> <tr> <th>Delete</th> <th>Brand</th> <th>Quantity</th> <th>Size</th> <th>Color</th> <th>Type</th> </tr> </thead> <tbody> <tr id='item1' class='item'> <td><button>Delete</button></td> <td>Yamaha</td> <td>30</td> <td>Large</td> <td>Black</td> <td> <select name="" class="itemType"> <option value="i">Iron</option> <option value="c">Copper</option> <option value="w">Wood</option> </select> </td> </tr> </tbody> <tfoot> <tr> <td colspan='5'></td> <td> <button class="addItem">Add Item</button> </td> </tr> </tfoot> </table> </td> </tr> </tbody> <tfoot> <tr> <td colspan='3'></td> <td> <button class="addCustomer">Add Customer</button> </td> </tr> </tfoot> </table> </section> <footer>&nbsp;</footer> 

Answer 1

要在点击任何“删除”按钮时删除相应的行，您可以尝试使用它吗？

  $(document).on('click', '.item button', function(){
    $(this).parent().parent().remove();
  });

这是一个Codepen

我注意到的另一件事是，你想在你的$('.itemType').on('change', function()做什么$('.itemType').on('change', function() ？因为到目前为止你所做的一切都是字面上检查所选选项的值到ITSELF这显然是真的。

Answer 2

你必须传递一个元素id，它将从客户的购物车和选定的行中删除，如下所示;

<tr class="item"><td><button data-id="1">Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id=""><option value="">Iron</option><option value="">Copper</option><option value="">Wood</option></select></td>

jquery部分：

    $("tr.item button").click(function(){
  var item_to_remove = $(this).attr("data-id");
  var row = $(this).parent().parent();



$.ajax({
    url: "url to cart handler for delete item",
    data: "id="+item_to_remove,
    type: "post",
    success: function(data){
        row.remove();
    },
    error: function(){
        console.log("ajax req for delete failed");
    }
  });
});

Answer 3

我修复了Delete问题。 在验证方面，回答我的下面的问题，我将解决相同的问题。

好的，我现在使用空项目正确处理它并禁用其他项目上的选定值。

 $(".addItem").on('click', function(e) { var parent = $(this).closest('table'); var lastItem = parent.find(".item:last"); var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>'); if(lastItem && lastItem.length > 0) { parent.find(".item:last").after(newItem); } else { parent.append(newItem); } fixNewSelectOption(newItem); handleDeleteAction(); }); $(".addCustomer").on('click', function(e) { var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>'); var newCart = $('.cart:first').clone(true, true).wrap('td'); newCart.find('tbody').html("").html('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>'); $('.customer:last').append(newCart); handleDeleteAction(); e.preventDefault(); }); $(document).on('click', '.item button', function(){ if($(this).closest('table').find('.item button').length > 1) { $(this).closest('tr').remove(); } handleDeleteAction(); }); $(document).on('change', '.itemType', function(){ fixSelectOption($(this)); }); function handleDeleteAction() { $('table.cart').each(function(){ var cart = $(this); var deleteButtons = cart.find('.item button'); deleteButtons.prop('disabled', deleteButtons.length <= 1); }); } function fixSelectOption(elm) { var selected = elm.val(); var options = elm.find('option[value!="' + selected + '"]'); var elms = elm.closest('table').find('.itemType').not(elm); elms.each(function(){ var current = $(this); if(current.val() === selected){ current.val('-1'); } options.each(function(){ var optValue = $(this).val(); if(optValue !== '-1' && !$(this).prop('disabled')){ current.find('option[value="' + optValue + '"]').prop('disabled', false); } }); if(selected !== '-1'){ current.find('option[value="' + selected + '"]').prop('disabled', true); } }); } function fixNewSelectOption(elm) { var elms = elm.closest('table').find('.itemType').not(elm); elms.each(function(){ var current = $(this); if(current.val() !== '-1'){ elm.find('option[value="' + current.val() + '"]').prop('disabled', true); } }); } 

 table, td, th { border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <title>PO</title> <header> <form id="panel"> </form> </header> <section id="I"> <table id='PO1' class="purchaseOrder"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Address</th> <th>Gender</th> <th>Cart</th> </tr> </thead> <tbody> <tr id='C1' class='customer'> <td>Some Name</td> <td>30</td> <td>My Address</td> <td>Male</td> <td> <table class='cart'> <thead> <tr> <th>Delete</th> <th>Brand</th> <th>Quantity</th> <th>Size</th> <th>Color</th> <th>Type</th> </tr> </thead> <tbody> <tr id='item1' class='item'> <td><button disabled>Delete</button></td> <td>Yamaha</td> <td>30</td> <td>Large</td> <td>Black</td> <td> <select id="select" class="itemType"> <option value="i">Iron</option> <option value="c">Copper</option> <option value="w">Wood</option> </select> </td> </tr> </tbody> <tfoot> <tr> <td colspan='5'></td> <td> <button class="addItem">Add Item</button> </td> </tr> </tfoot> </table> </td> </tr> </tbody> <tfoot> <tr> <td colspan='3'></td> <td> <button class="addCustomer">Add Customer</button> </td> </tr> </tfoot> </table> </section> <footer>&nbsp;</footer> 

Answer 4

为了删除行，我添加了checboxes。 PLUNKER

SNIPPET

 table { table-layout: fixed; } table, td, th { border: 1px solid black; } .name, .brand, .color { width: 10%; } .age, .address, .pay, .qty, .size { width: 5%; } .cart th:first-of-type { width: 2.5%; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <title>PO</title> <link href="style.css" rel="stylesheet"> </head> <body> <header> </header> <section id="I"> <table id='PO1' class="purchaseOrder"> <thead> <tr> <th class='name'>Name</th> <th class='age'>Age</th> <th class='address'>Address</th> <th class='pay'>Pay</th> <th>Cart</th> </tr> </thead> <tbody> <tr id='C1' class='customer'> <td>Jon Doe</td> <td>30</td> <td>Earth</td> <td>Credit</td> <td> <table class='cart'> <thead> <tr> <th>&nbsp;</th> <th class='brand'>Brand</th> <th class='qty'>Qty</th> <th class='size'>Size</th> <th class='color'>Color</th> </tr> </thead> <tbody> <tr id='item1' class='item'> <td> <input class="chx" name="chx" type="checkbox"> </td> <td>New Item</td> <td></td> <td></td> <td> <select name='color'> <option value='black'>Black</option> <option value='white'>White</option> </select> </td> </tr> </tbody> <tfoot> <tr> <td> <button class="remItem" onclick='remItem(this)'>-</button> </td> <td colspan='3'></td> <td> <button class="addItem" onclick='addItem("itemTemplate", this)'>+</button> </td> </tr> </tfoot> </table> </td> </tr> </tbody> <tfoot> <tr> <td colspan='3'></td> <td> <button class="addCustomer">Add Customer</button> </td> </tr> </tfoot> </table> </section> <footer> <template id="cartTemplate"> <table class='cart'> <thead> <tr> <th>&nbsp;</th> <th class='brand'>Brand</th> <th class='qty'>Qty</th> <th class='size'>Size</th> <th class='color'>Color</th> </tr> </thead> <tbody> <tr class='item'> <td> <input class="chx" name="chx" type="checkbox"> </td> <td>New Item</td> <td></td> <td></td> <td> <select name='color'> <option value='black'>Black</option> <option value='white'>White</option> </select> </td> </tr> </tbody> <tfoot> <tr> <td> <button class="remItem" onclick='remItem(this)'>-</button> </td> <td colspan='3'></td> <td> <button class="addItem" onclick='addItem("itemTemplate",this)'>+</button> </td> </tr> </tfoot> </table> </template> <template id='itemTemplate'> <tr class="item"> <td> <input class="chx" name="chx" type="checkbox"> </td> <td>New Item</td> <td></td> <td></td> <td> <select name="color"> <option value="black">Black</option> <option value="white">White</option> </select> </td> </tr> </template> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script> $(".addCustomer").on('click', function(e) { var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>'); var newCart = newClone('cartTemplate'); $('.customer:last').append(newCart); e.preventDefault(); }); function newClone(id) { var template = document.getElementById(id); var clone = document.importNode(template.content, true); return clone; } function addItem(id, origin) { var newItem = newClone(id); $(origin).closest('table').append(newItem); } function toggle(origin) { var chxList = $(origin).closest('table').find('.chx:checked'); chkList.click(function() { chkList.prop('checked', origin.checked) }) } function remItem(origin) { var chxList = $(origin).closest('table').find('.chx:checked'); chxList.each(function(idx, obj) { obj.closest('.item').remove(); }); } </script> </body> </html> 

Answer 5

我知道你的问题得到了答案，但我没有注意到代码中的一些不良模式。 您可能听说过最佳实践短语以及如何以正确的方式完成工作。 我想提出一个建议。 尽可能避免在Javascript代码中使用HTML，因为它会使应用程序的结构不够好。

我想告诉你模板 。

示例我们如何优化您的代码（来自已接受的答案）：
在script标记中将所有内容newItem变量并将其放在您的正文中：

<script id="newItem-template" type="text/x-custom-template">
  <tr class="item"><td><button>Delete</button></td>
  <td>New item</td><td></td><td></td><td></td><td>
  <select name="" id="" class="itemType"><option value="-1"></option>
  <option value="i">Iron</option><option value="c">Copper</option>
  <option value="w">Wood</option></select></td></tr>
</script>

浏览器将忽略这一点，直到您调用html()方法返回该内容。

所以不是这样的：

 var newItem = $('<tr class="item"><td><button>Delete</button></td><td>New item</td><td></td><td></td><td></td><td><select name="" id="" class="itemType"><option value="-1"></option><option value="i">Iron</option><option value="c">Copper</option><option value="w">Wood</option></select></td></tr>');

在你的javascript文件中，你将只有这个：

 var newItem  = $('#newItem-template').html();

这是优化的工作代码： jsFiddle

这是使用模板管理的jQuery方法，但如果您的项目变大，则有强大的模板引擎：
JavaScript模板引擎