Using jQuery to filter and remove input with no data

Question

I have a form which is a sales order. The form show all the available products that can be selected. Each row has to inputs QTY & ID. The ID is hidden.

I am able to filter the input for the QTY because any items not selected with have no value. The problem I have is that even if there is no value in the QTY the ID will have a value.

What I would like to do is to remove this row completely so if the qty value has no value also remove the ID

• The name of the qty input is lineItem[i][qty] // i is indexed for each row
• The name of the id is lineItem[i][product] // i is indexed for each row

JavaScript:

// This is just the function to show you how I have the input structured
var showProduct = function (result) {

    //console.log(result.id  + " " + result.product );
    var last = $('.display:last');

    $(".display ").append("<tr> <td class = \"hide\">" + result.id + " </td> <td> " + result.productName + " </td> <td >"

    + "<input type = \"number\" min =\"0\" class = \"qty\" >   
    </input> </td> <td class = \"hide\"> " + "<input class = \"id\"  value = \"" + result.productName +
        "\"></td> </tr>"
    );

    var input = $(last.find('input.qty')[i]);
    input.attr("name", "lineItem[" + i + "][qty]");

    var input2 = $(last.find('input.id')[i]);
    input2.attr("name", "lineItem[" + i + "][product]");

    //console.log(i);
    i++
};

The code I currently have to filter and trim the form results is as follows:

$('.form2').on ('click tap', '#submit2', (function () {
    $('form').submit (function () {
   event.preventDefault();


    var formData =  $(this).find(":input").filter(function () {
      console.log("This is the this.value" + this);
     return $.trim(this.value).length > 0
}).serializeArray();

Thanks for any help you can provide.

Answer 1

You are attaching an event listener inside your event handler. I'm not sure if that's intended or not. I think what you're trying to accomplish is:

$('form').submit(function() {
  // filter out each "tr" that does not have a qty value
  $('.display tr').filter(function() {
    return !$(this).find('input.qty').val();
  }).remove();
});