Question

I have a function which takes two arguments, the ID of an item (wine) and the quantity of bottles ordered.

The order is built up in a dynamic jquery table.

The logic is that if the user buys more than 3 bottles a discount is applied, and a row showing the discount to the wine is added. If they change the value to 3 or more, and then drop the value to below 3 I want the row showing the discount to be removed.

Why does this not work? The alert is firing, so I guess it is an error with the remove() line.

            function UpdateWineDiscount(id, qty) {
            // Does discount row already exist?
            if ($("#trTable tr > td:contains('D" + id + "')").length) {
                // If discount row exists and qty is now below 3, remove it
                if (qty < 3) {
                    $("D" + id).remove();
                    alert("remove");
                };
            } else {
                // Is qty >= 3?
                if (qty >= 3) {
                    // Add discount row
                    var newRow = $("<tr id='D" + id + "' style='color:red'> <td class='drinkID' style='display:none'>D" + id + "</td> <td class='drinkName'>Wine Discount</td>  <td></td>  <td></td>  <td></td>  <td></td>  <td class='drinkTotal'>-1</td>  </tr>");
                    $("#trTable").append(newRow);
                } else {
                    // Update discount value
                };
            };
        }

Answer 1

Your code is a little off in order to remove an element by id it needs to have a # in front:

$("#D" + id).remove();