I append the <tr> to <tbody>
for (var i = 0 ;i < 12 ;i++){
$(`<tr><td>test</td></tr>`).appendTo('#songsTbody');
}
to this html.
<tbody id="songsTbody">
</tbody>
Now I want to remove() only appended <tr> but
$('#songsTbody').remove();
it remove <tbody> itself.
How can I remove only <tr>??
You can pass a selector into the .remove() call so if there are no other s and you want to remove them all, you could do $('#songsTbody').remove('tr') or even just $('#songsTbody tr').remove().
If you need to just remove the last one that was added, you could try $('#songsTbody tr:last-child').remove() or $('#songsTbody').remove('tr:last-child')
You can recognize appended <TR> adding a data attribute or a class.
for (var i = 0 ;i < 12 ;i++){
$(`<tr class="appended"><td>test</td></tr>`).appendTo('#songsTbody');
}
and after you can easily remove just new TR with
$('#songsTbody').remove('tr.appended')
Save it in a variable(s).
var arr = []
for (var i = 0; i < 12; i++) {
var elem = $(`<tr><td>test</td></tr>`);
elem.appendTo('#songsTbody');
arr.push(elem);
}
// remove:
arr.forEach((elem) => elem.remove());