Question

I am making a table display optimization of my website when the windows width gets below 500px, in which I want the tables to only have 2 columns; Title, Teaser.

As of now I am chaining like this:

var $rows = $(".zn-listviewtable tr");
if ($rows.children('td').length > 3) {
    $rows.find("td:gt(2)").remove().end().find("th:gt(2)").remove().end().find("td:lt(1)").remove().end().find("th:lt(1)").remove();
}

As you can see I have an if-statement checking if there’s more than 3 columns (or td‘s) and if so, then remove all that is > 2 and < 1.

The only field which is < 1 is a checkbox field in each row. Not all my tables has this field, so I only want to apply the remove() on those which does have it.

Is there a way to check of this during the chaining rather than splitting it up and then start all over in a seperate one, avoiding it ending up like this:

var $rows = $(".zn-listviewtable tr");
if ($rows.children('td').length > 3) {
    $rows.find("td:gt(2)").remove().end().find("th:gt(2)").remove();
}
if ($rows.children('td').find('input:checkbox').length > 0) {
    $rows.find("td:lt(1)").remove().end().find("th:lt(1)").remove();
}

Answer 1

First, it’s easier to write:

$rows.find("td:gt(2)").remove().end().find("th:gt(2)").remove().end().find("td:lt(1)").remove().end().find("th:lt(1)").remove();

as:

$rows.find("td:gt(2),th:gt(2),td:eq(0),th:eq(0)").remove();

If you want to chain everything you’ll need to assign a class to tables that have a first column of checkboxes (or the first tds and th)

Otherwise, you can:

if ($rows.find('td:eq(0):has(input[type="checkbox"])').length)
    $rows.find("td:eq(0),th:eq(0)").remove();

$rows.find("td:gt(1),th:gt(1)").remove();

Which conditionally removes the checkbox column, and leaves 2 columns