Question

Let’s say I have a table with these rows:

<table>
    <tr id="before_dynamic_rows"></tr>
    <tr id="after_dynamic_rows"></tr>
</table>

Using jQuery, I insert automatically generated rows (search results) before the after_dynamic_rows row. How can I delete a range of rows, namely – you guess it – the ones between the row with the id before_dynamic_rows and the row after_dynamic_rows? (In order to be able, after having inserted them, to remove them and insert different ones.)

var response = ajax.responseText;
$('#after_dynamic_rows').before(response);

That’s how I insert the new rows. Considering the first answer: how can I assign a class to whatever the response text may be?

Answer 1

This answer is based on a literal interpretation of the question with the idea that the only rows which should be removed are those rows that are in between #before_dynamic_rows element and #after_dynamic_rows.

See working version at: http://jsfiddle.net/7wBzd/

var $rows = $("tr");
$("tr:lt("+ $rows.index($("#after_dynamic_rows")) +"):gt("+ $rows.index($("#before_dynamic_rows")) +")").remove();