How to delete and add back values in table using javascript

Question

In my scenario just select the list box options, that values and text going to append to the table rows, but i am facing small issues, user not allow to select same options (already selected options) and user not allow to append same values in the table.. if user select same option show alert messages like, 'you are already selected, select another option' like that..

but here now if i delete any rows and add back that same value, it showing alert 'its matching', i don't need that, if i delete and add back the same value into the table..

Full Fiddle here..

Fiddle here..

Sample code here..

// Small table

// Exiscisting supplier dropdown change function - for new method

$("#excist_supp").on("change", function() {

  if (!check()) {
    $(".indexDrop").hide();

    var newText = $("#excist_supp option:selected").text();
    var newValue = $("#excist_supp option:selected").val();
    console.log(newText, 'not yet to delete');
    console.log(newValue, 'not yet to delete');

    // delete button
    $("table.order-list").on("click", ".ibtnDel", function(_event) {
      var $row = $(this).closest("tr"); // Find the row
      var $text = $row.find(".newStyle1").val(''); // Find the text
      var $secTd = $row.find(".newStyle2").val('');
      $(this).closest("tr").remove();
    });


    $("#letterTable tbody").append('');



    $("#letterTable tr").each(function(i) {

      var count = (i) - 1;
      // alert(count);
      if (i === 0) return;
      var input1 = $(this).find('.newStyle1');
      var input2 = $(this).find('.newStyle2');

      // id
      // Dropdowns increment
      input1.eq(0).attr("id", "sm_supp" + count); // Text fields
      input2.eq(0).attr("id", "sm_code" + count);
      input1.eq(0).attr("name", "reqpartys[" + count + "].pname"); // Text fields
      input2.eq(0).attr("name", "reqpartys[" + count + "].pacd");
    });
  }

});

/* compare two fields and not allow to selected options to select second time */

var temp = [];

function check() {
  var listVal = $('#excist_supp').val();
  var tableVal = $('.newStyle2').val();
  var nawTab = JSON.stringify(tableVal);

  if (temp.includes(listVal)) {
    alert('matching!');
    $(".notify").addClass("active");
    $("#notifyType").addClass("failure");

    setTimeout(function() {
      $(".notify").removeClass("active");
      $("#notifyType").removeClass("failure");
    }, 3000);
    return true;
  } else {
    // alert('Not matching!');
    temp.push(listVal)
    return false;
  }
}









  
    
      
        
          
        
      
    
  




  
    
      
        
          
            
              
                Supplier Name
                Supplier Code
                Action

GBWDev · Accepted Answer

It's like I stated in the comments. Your delete function runs a check to see if it already exists or not in the table and is storing them into a variable called temp. You need to remove the deleted row from this variable in the delete function otherwise it will think it always exists hence your problem....

  if(temp.includes($row.find(".newStyle2").val())){
      temp = temp.filter(v => v != $row.find(".newStyle2").val())
  }

// Small table

// Exiscisting supplier dropdown change function - for new method
var temp = [];
$("#excist_supp").on("change", function() {

  if (!check()) {
    $(".indexDrop").hide();

    var newText = $("#excist_supp option:selected").text();
    var newValue = $("#excist_supp option:selected").val();
    console.log(newText, 'not yet to delete');
    console.log(newValue, 'not yet to delete');

    // delete button
    $("table.order-list").on("click", ".ibtnDel", function(_event) {
      var $row = $(this).closest("tr"); // Find the row
      var $text = $row.find(".newStyle1").val(''); // Find the text
      
      if(temp.includes($row.find(".newStyle2").val())){
        temp = temp.filter(v => v != $row.find(".newStyle2").val())
      } 
      
      
      var $secTd = $row.find(".newStyle2").val('');
      $(this).closest("tr").remove();
      delete newText;
      delete newValue;

      console.log(newText, 'value deleted');
      console.log(newValue, 'value deleted');
    });


    $("#letterTable tbody").append('');



    $("#letterTable tr").each(function(i) {

      var count = (i) - 1;
      // alert(count);
      if (i === 0) return;
      var input1 = $(this).find('.newStyle1');
      var input2 = $(this).find('.newStyle2');

      // id
      // Dropdowns increment
      input1.eq(0).attr("id", "sm_supp" + count); // Text fields
      input2.eq(0).attr("id", "sm_code" + count);
      input1.eq(0).attr("name", "reqpartys[" + count + "].pname"); // Text fields
      input2.eq(0).attr("name", "reqpartys[" + count + "].pacd");
    });
  }

});

/* compare two fields and not allow to selected options to select second time */



function check() {
  var listVal = $('#excist_supp').val();
  var tableVal = $('.newStyle2').val();
  var nawTab = JSON.stringify(tableVal);

  if (temp.includes(listVal)) {
    alert('matching!');
    $(".notify").addClass("active");
    $("#notifyType").addClass("failure");

    setTimeout(function() {
      $(".notify").removeClass("active");
      $("#notifyType").removeClass("failure");
    }, 3000);
    return true;
  } else {
    // alert('Not matching!');
    temp.push(listVal)
    return false;
  }
}









  
    
      
        
          
        
      
    
  




  
    
      
        
          
            
              
                Supplier Name
                Supplier Code
                Action

How to delete and add back values in table using javascript

Answers (2)

Related Questions