Remove dynamically appended <TR> from jquery-CodePudding

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>??

CodePudding user response：

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')

CodePudding user response：

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());

CodePudding user response：

You can recognize appended <TR> adding a data attribute or a class.

for (var i = 0 ;i < 12 ;i  ){
  $(`<tr ><td>test</td></tr>`).appendTo('#songsTbody');
}

and after you can easily remove just new TR with

$('#songsTbody').remove('tr.appended')