Removing class from the selected Table -> tr

Question

I have a drop-down list with categories that corresponds to a column in a table. When a category is selected in the drop-down list a function hides all items that don't match the selected category. I now want to remove a class from the item's parent. The table -> tr under tbody. This is my code:

JS

    var $rows = $('#table tbody tr');
    $("#dropdown").change(function () {
    var selected = $(this).find("option:selected").text().toLowerCase();
    if (selected != VISA_ALLA) {
        $rows.show().filter(function () {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
             $(this).parent().removeClass("ugly");
            return !~text.indexOf(selected);
        }).hide();

    } else {
        $rows.show();
    }
})

pagination

    $('#table').paginate({
    limit: 1,
    nextText: "Nästa",
    previousText: "Föregående",
    childrenSelector: 'tbody > tr.ugly'
});

HTML

<tbody>

            @foreach (BuyAndSellAppWeb.Models.Advertisment objProduct in Model)
                {

                    <tr class="ugly">
                        @if (objProduct.SellerToken)
                        {
                            <td>

                                @Html.ActionLink("Ändra", "Edit", new { id = objProduct.ID }) | @Html.ActionLink("Radera", "DeleteItem", new { id = objProduct.ID }) @*|@Html.ActionLink("Detaljer", "Details", new { id = objProduct.ID })*@

                            </td>
                        }
                        else
                        {
                            <td>
                                @Html.ActionLink("Detaljer", "Details", new { id = objProduct.ID })
                            </td>
                        }
                        <td>                       
                            @Html.ActionLink(@objProduct.ProductTitle, "Details", new { id = objProduct.ID })  
                        </td>
                        <td>@objProduct.Price kr</td>
                        <td>@objProduct.Created.ToString("yyyy/MMM/dd")</td>
                        <td id="category">@objProduct.Category</td>
                    </tr>
                }
            </tbody>

What am I doing wrong? the class "ugly" is never removed from the tr.

---EDIT---

So I want to remove all the ugly classes on the tr`s that dont match dropdown text. this is because I am using a pagination that renders all tr that has the class ugly. I want the pagination to update based on the dropdown selection.

Answer 1

Just do it inline chained to the other methods

$rows.removeClass("ugly").show().filter(function () {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();            
      return !~text.indexOf(selected);
}).hide();

Or chain after the filter...depending on what you are trying to accomplish( which is not clear)

Answer 2

Ok I think I get what you are going for, you either need to do:

var $matched = $rows.show().filter(function () {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(selected);
});

$matched.removeClass('ugly');

or

$rows.not($matched).removeClass('ugly');