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.
How can I update the entire div after deleting each row?
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 class="add-row font-icon-plus-sign">add</span></td>
</tr>
</table>
<div class='kind-out'></div>
</td>
</tr>
</table>
</td>
</tr>
</table>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 class="add-row font-icon-plus-sign">add</span></td>
</tr>
</table>
<div class='kind-out'></div>
</td>
</tr>
</table>
</td>
</tr>
</table>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 class="add-row font-icon-plus-sign">add</span></td>
</tr>
</table>
<div class='kind-out'></div>
</td>
</tr>
</table>
</td>
</tr>
</table>