I wrote a simple table, and in each row I'll update the div tag.

As you can see, each row contains two parts that are separated by :, and each part in my array separated by |.

so the output is something like this :

|3:Apple|5:Orange|1:Lemon

I'm very rookie in JS,So if you answer these two questions, I will be grateful.

1. How can I update the entire div after deleting each row?

2. According to the code I wrote(Just JS), do you suggest a shorter and cleaner way to update the div? I feel that the code I wrote is very spaghetti.

$('.add-row').click(function() {
  row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>";
  $(this).closest('table').append(row);
});
$('table').on('click', 'td span.del-row', function(e) {
  $(this).closest('tr').remove();
});
$(document).on('change', 'input[name="prodKind"]', function() {
  mainArr = [];
  var mainTable = $(this).closest('table');
  var tr = mainTable.find('tr');
  tr.each(function() {
    tmpArr = [];
    $(this).find('.product_kind').each(function() {
      var values = $(this).find('input').val();
      tmpArr.push(values);
    });
    mainArr.push(tmpArr.join(":"));
  });
  $(this).parent().parent().parent().parent().closest('td').children('.kind-out').html(mainArr.join("|"));
  $(this).parent().parent().parent().parent().closest('td').children('.kind-out').trigger('blur');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tr>
  <td>
<table>
  <tr>
<td>
  <table class='table tablemain' border=1>
    <tr>
      <td>number</td>
      <td>item</td>
      <td><span >add</span></td>
    </tr>
  </table>
  <div class='kind-out'></div>
</td>
  </tr>
</table>
  </td>
</tr>
</table>

CodePudding user response：

I have added a render function which basically gets called from the delete button click and the input change

$('.add-row').click(function() {
  row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>";
  $(this).closest('table').append(row);
});
$('table').on('click', 'td span.del-row', function(e) {
  $(this).closest('tr').remove();
  render();
});

//Render function called from onchange as well as delete click
function render(){
 mainArr = [];
  var mainTable = $('.tablemain');
  var tr = mainTable.find('tr');
  $('.kind-out').html("");
  tr.each(function() {
    tmpArr = [];
    $(this).find('.product_kind').each(function() {
      var values = $(this).find('input').val();
      if(values.trim() != ''){
      tmpArr.push(values);
      }
    });
    if(tmpArr.length > 0)
    mainArr.push(tmpArr.join(":"));
  });
  $('.kind-out').html(mainArr.join("|"));
  $('.kind-out').trigger('blur');
}

$(document).on('change', 'input[name="prodKind"]', render);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tr>
  <td>
<table>
  <tr>
<td>
  <table class='table tablemain' border=1>
    <tr>
      <td>number</td>
      <td>item</td>
      <td><span >add</span></td>
    </tr>
  </table>
  <div class='kind-out'></div>
</td>
  </tr>
</table>
  </td>
</tr>
</table>

CodePudding user response：

Make simpler functions to solve your issues Also simplify the paths to the siblings

const row = "<tr class='prod-row'><td class='product_kind'><input type='number' name='prodKind' placeholder='number' /></td><td class='product_kind'><input dir='rtl' type='text' name='prodKind' placeholder='item' /></td><td><span class='del-row font-icon-minus-sign'>del</span></td></tr>";


const getValues = $table => $table.find('tr').map(function() {
  return $(this).find('.product_kind input').map(function() {
    return this.value
  }).get().join(":")
}).get().join("|");


const update = $mainTable => $mainTable
  .next('.kind-out')
  .html(getValues($mainTable));


$(document).on('change', 'input[name="prodKind"]', function() {
  const $mainTable = $(this).closest('.tablemain');
  update($mainTable)
});
$('.add-row').on('click', function() {
  $(this).closest('tbody').append(row);
});
$('table').on('click', 'td span.del-row', function(e) {
  const $table = $(this).closest('.tablemain'); // must save before remove
  $(this).closest('tr').remove();
  update($table)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <table class='table tablemain' border=1>
              <tr>
                <td>number</td>
                <td>item</td>
                <td><span >add</span></td>
              </tr>
            </table>
            <div class='kind-out'></div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>