Adding a second order with the same email doesn't remove first order from checklist

Frontend Web Development: The Big Nerd Ranch Guide Chapter 11: From Data to DOM
1

Like the title says, I’ve just completed the part where you alter CheckList’s addRow function to check for pre-existing orders with the same email address, but when I test it both orders remain on the checklist. I’ve tried debugging it but stepping into the find function just gives me a confusing mess of jQuery code. Here are my addRow and removeRow functions:

CheckList.prototype.addRow = function(coffeeOrder) {
// Remove any existing rows that match this orders email address
this.removeRow(coffeeOrder.emailAddress);

// Create a new checklist item for the coffeeOrder
var rowElement = new Row(coffeeOrder);

// Append it to the end of the checklist
this.$element.append(rowElement.$element);

};

CheckList.prototype.removeRow = function(email) {
this.$element
.find(’[value="’ + email + ‘"]’)
.closest(’[data-coffee-order=“checkbox”]’)
.remove();
};

2

Just figured out the problem. In my Row constructor I created the variable $checkbox like so:

var checkbox = (’’, {
type: ‘checkbox’,
value: ‘coffeeOrder.emailAddress’
});

I accidentally put single quotes around coffeeOrder.emailAddress. Removing them solved the problem.

3

Just got to this, but it looks like you solved it! :+1:

4

I also have the same problem. My code does not seem to be any different from the book’s:

CheckList.prototype.addRow = function (coffeeOrder){
    this.removeRow(coffeeOrder.emailAddress);

    var rowElement = new Row(coffeeOrder);

    this.$element.append(rowElement.$element);
  };

  CheckList.prototype.removeRow = function (email) {
    this.$element
      .find(['value="' + email + '"'])
      .closest('[data-coffee-order="checkbox"]')
      .remove();
  };

Please help. Will really appreciate it.

5

Figured it out. Syntax errors.