jQuery/JS: delete object from array and DOM

Question

I am learning JS and jQuery. As an exercise, I am trying to create a basic contact list. I need to be able to add and delete contacts from the list.

But I am having some bugs in my result. I can't find the cause of it. If anyone can advise? I would be most gratefull.

BUG 1: When running the snippet below, you will see some sample contacts generated in the list. You can delete a contact just fine. You can also add a contact. But after adding a contact, the delete buttons stop working.

First I thought the issue was probably a missing character in my .html() method on the contacts objects. But I see no errors there. Anyone?

BUG 2: Inside the $renderContacts function. You can see the const html. This should replace the let html and for loop below. And it works for long list of contacts. But the first contact is rendered as [object Object]. I don't see the cause. Might these 2 bugs be related?

Please advise. Many thanks! :)

$(document).ready(function() {

  // Array to store all contacts
  let contactsArr = [];

  // counter to create incrementing ID
  let contactID = 0;

  // Constructor for contact objects
  function Contact(firstName, lastName, email, phone, address) {
    this._id = contactID += 1;
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
    this.phone = phone;
    this.address = address;
    contactsArr.push(this);
  };

  // Some getters, setters and a methods for contact objects
  Contact.prototype = {
    constructor: Contact,
    set(id) {
      console.log(`ID is generated on input and may not be changed`)
    },
    get id() {
      return this._id;
    },
    set firstName(firstName) {
      this._firstName = firstName;
    },
    get firstName() {
      return this._firstName;
    },
    set lastName(lastName) {
      this._lastName = lastName;
    },
    get lastName() {
      return this._lastName;
    },
    set email(emailaddress) {
      this._email = emailaddress;
    },
    get email() {
      return this._email;
    },
    set phone(phone) {
      this._phone = phone;
    },
    get phone() {
      return this._phone
    },
    set address(address) {
      this._address = address;
    },
    get address() {
      return this._address
    },
    toHTML() {
      const renderCell = (content, cssClass = "") => `${content}`;
      const deleteContact = ``;
      const rowActions = renderCell(deleteContact, "text-right contact-actions");
      return '' +
        renderCell(this.id, "contact-id text-right") +
        renderCell(this.firstName, "first-name") +
        renderCell(this.lastName, "last-name") +
        renderCell(this.email, "email") +
        renderCell(this.phone, "phone") +
        renderCell(this.address, "address") +
        rowActions + '';
    },
  };


  // SAMPLE CONTACTS
  new Contact("John", "Cubico", "mymail@mail.com", "111-555-6666", "Belgium");
  new Contact("Lisa", "The Sailor", "mymail@mail.com", "111-666-7777", "Spain");
  new Contact("Christophe", "From next door", "mymail@mail.com", "111-777-8888", "Germany");
  new Contact("Aïsha", "From elsewere", "mymail@mail.com", "111-888-9999", "Brussels, Holland");

  // Render Samples
  function $renderContacts(arr = contactsArr) {
    //const html = arr.reduce((all, one) => all += one.toHTML()); // ==>> 1st not rendering
    let html = ``;
    for (let i = 0; i < arr.length; i++) {
      html += arr[i].toHTML();
    };
    $("#contacts-list").append(html);
  };
  $renderContacts();



  // BUTTONS & ACTIONS

  // Add contact
  $("#add-contact").on("click", () => {
    const $firstName = $("#first-name").val();
    const $lastName = $("#last-name").val();
    const $email = $("#email").val();
    const $phone = $("#phone").val();
    const $address = $("#address").val();
    const contact = new Contact($firstName, $lastName, $email, $phone, $address); // create contact
    $("#contacts-list").append(contactsArr[contactsArr.length - 1].toHTML()); // add contact to DOM
  });

  // Delete contact
  $(".delete-contact").on("click", (event) => {
    const arr = contactsArr.slice();
    const $id = Number($(event.currentTarget).closest(".table-row").find(".contact-id").text());
    const i = arr.findIndex(contact => contact.id == $id);
    contactsArr = arr.slice(0, i).concat(arr.slice(i + 1)); // delete from array of contacts
    $(event.currentTarget).closest(".table-row").remove(); // delete only this contact from DOM
  });


});

html {}

.active {}

.inactive {
  color: #b8b8b8;
}

.table td,
.table th {
  padding: 0.5rem;
}

.text-large {
  font-size: 1.5rem;
}

.relative {
  position: relative;
}


/*** Search ***/

#search-input {
  font-size: 2rem;
  font-weight: 300;
}

span#search-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 47px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 1.6rem;
  line-height: 34px;
}


/*** Contacts table ***/

.table-header {
  padding: 15px 0 5px;
}

.table-row {
  display: grid;
  grid-template-columns: 30px repeat(5, 1fr) 100px;
  grid-column-gap: 20px;
  margin: 3px 0;
  padding: 2px 0;
  background: #f0f0f0;
}

.table-cell {
  padding: 3px;
}

.editable-cell {
  background: rgba(255, 255, 255, 0.6);
}

.contact-actions span {
  line-height: 18px;
  padding: 3px;
  display: inline-block;
  width: 26px;
  text-align: center;
}


/*** Form ***/

#form-new-contact {
  align-items: end;
  margin: 0 -15px;
  padding: 15px;
}

#add-contact {
  width: 100%;
}




  jQuery contacts app
  
  
  



  
    
      jQuery contacts app
    
  
  
    
      
        
        
          First name:
          
        
        
          Last name:
          
        
        
          Email:
          
        
        
          Phone:
          
        
        
          Address:
          
        
        
          
        
      
      
        
          
            ID
          
          
            Firstname
          
          
            Lastname
          
          
            Email
          
          
            Phone
          
          
            Address
          
          
            Actions

Lab Lab · Accepted Answer

BUG1:

You can't fire on click function on dynamically generated DOM element like that. Add event listener to your element (using pure JS):

elem.addEventListener("click", func, false);

Or change syntax of your click function to this (using jQuery):

$(document).on("click",'.delete-contact', (event) => {
 // your code here
});

BUG2:

I don't know why this function acts like that, but you always have to pass default string parameter. Look to the next lines I made:

let html = arr.reduce((all, one) => all += one.toHTML(), '');

Working fiddle

jQuery/JS: delete object from array and DOM

Answers (1)

BUG1:

BUG2:

Related Questions