Webman Webman - 29 days ago 10
HTML Question

How can I identify a specific item in <select> and add a delete button each row in jquery

1.) I have created a nested table, then what I want to do is when I click the 'Delete' button inside the child table, its row will be deleted.

2.) I have

<select>
tag. The problem is how can I put a validation which checks if the item type has been already selected by one customer, but this selected item can be also selected at the next Customer.

For example, Customer1 selects
Iron
. Now the Customer1 cannot choose the
Iron
type of item on the next item. Customer1 may also select
Copper
or
Wood
but not
Iron
. Then if I have Customer2 the
Iron
type of Item can be selectable.

Here's my code:



$(".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

I have fixed the Delete issue. In terms of validation, answer my below question and I will fix the same.

Okay, I handled it now properly with an empty item and disabling the selected value on other item.

$(".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>