I’m building a Phone Book where users are able to add, delete and search contacts. Everything works well so far, I can add and save contacts in local storage and I can delete them in the UI. But after deleting them, they still persist in the local storage, so they reappear when the page is refreshed. Any suggestion is welcome!
I have a Contact class:
“`
class Contact {
constructor(name, phone) {
this.name = name;
this.phone = phone;
}
}
Here is removeContact function in the Store class:
“`
static removeContact(phone) {
const contacts = Store.getContact();
contacts.forEach((contact, index) => {
if(contact.phone === phone) {
contacts.splice(index, 1);
}
});
localStorage.setItem(‘contacts’, JSON.stringify(contacts));
}
}
And here I call the method:
“`
document.querySelector(‘#contact-items’).addEventListener(‘click’, (e) => {
// Remove contact from storage
Store.removeContact(e.target.parentElement);
});
e.target.parentElement
` ``<i>
</i><div id= "contact-items">
<ul id="names" class="collection with-header"><i>
</i>
`</CODE>
And here I add the <li>'s dynamically:
<CODE>
`<i>
</i>static addContactToList(contact) {
const itemDiv = document.querySelector('#contact-items');
const list = document.querySelector('#names');
list.insertAdjacentHTML("afterbegin",
</li>
<li class="collection-item">
<a href="#"><i class="fas fa-user text-blue "></i><span class="text-grey">${contact.name} </span></a>
<span class="contact-phone"><i class="fas fa-phone text-blue phi "><span class="text-grey ph">${contact.phone}</span></i></span>
<i class="far fa-trash-alt delete"></i>
</li> );
;
}<i>
</i>
``
static addContactToList(contact) {
const itemDiv = document.querySelector('#contact-items'); <br/>
const list = document.querySelector('#names');
<i> </i>
<i> </i>list.insertAdjacentHTML("afterbegin", <span><code>
<i> </i> &lt;/li&gt;
<i> </i> &lt;li class="collection-item"&gt;
<i> </i> &lt;a href="#"&gt;&lt;i class="fas fa-user text-blue "&gt;&lt;/i&gt;&lt;span class="text-grey"&gt;${contact.name} &lt;/span&gt;&lt;/a&gt;
<i> </i> &lt;span class="contact-phone"&gt;&lt;i class="fas fa-phone text-blue phi "&gt;&lt;span class="text-grey ph"&gt;${contact.phone}
<i> </i> &lt;/span&gt;&lt;/i&gt;&lt;/span&gt;
<i> </i>
<i> </i> &lt;i class="far fa-trash-alt delete" data-phone="${contact.phone}"&gt;&lt;/i&gt;
<i> </i> &lt;/li&gt; </code></span>);
}
<i>
</i> // add event listener to each delete button
const delButtons = document.querySelectorAll('#contact-items .delete');
for (let i = 0; i < delButtons.length; i++) {
delButtons[i].addEventListener('click', function () {
const phone = this.getAttribute('data-phone');
removeContact(phone);
});
}
contacts = contacts.filter(contact => contact.phone !== phone);
``<i>
</i>static removeContact(phone) {
const contacts = Store.getContact();
contacts.forEach((contact, index) => {
if(contact.phone === phone) {
contacts.splice(index, 1);
}
});
localStorage.setItem('contacts', JSON.stringify(contacts));
console.log(contacts);
}
} <i>
</i>
``
if(contact.phone === phone) {
</C><br/>
Try to allow for implicit type conversion:<br/>
<C>
if(contact.phone == phone) {
</C><br/>
or cast the type:<br/>
<C>
if(String(contact.phone) === phone) {
`console.log(contacts);
`static removeContact(phone) {
const contacts = Store.getContact();
<br/>
<i> </i> contacts.forEach((contact, index) => {
<i> </i> console.log(contact.phone);
<i> </i> console.log(phone);
<i> </i> if(contact.phone === phone) {
<i> </i> contacts.splice(index, 1);
<i> </i> }
<i> </i>
<i> </i> });
<i> </i>
<i> </i> localStorage.setItem('contacts', JSON.stringify(contacts));
<i> </i>
<i> </i>console.log(contacts);
<i> </i>
<i> </i>}
}
``<i>
</i>contacts.forEach((contact, index) => {
console.log(contact.phone);
console.log(phone);<i>
</i>
``
// add event listener to each delete button
const delButtons = document.querySelectorAll('#contact-items .delete');
for (let i = 0; i < delButtons.length; i++) {
delButtons[i].addEventListener('click', function () {
const phone = this.getAttribute('data-phone');
removeContact(phone);
});
}
``<i>
</i><body>
<div class="container">
<h1 class="center-align" id="htitle">
<i class="fas fa-address-book fa-lg text-blue"></i> My<span class="text-blue">Phone</span>Book</h1>
<i class="fas fa-search"></i> <input type="text" id="filterInput" placeholder="Search a contact...">
<!-- Add a Contact-->
<div class="quickadd">
<button id="QuickAdd" class="waves-effect blue darken-2 btn">+ Add New Contact</button>
</div>
<div class="quickaddForm">
<form id="book-form">
<div class="form-group">
<input type="text" id="name" placeholder="Add a name" class="form-control">
</div>
<div class="form-group">
<input type="text" id="phone" placeholder="Add a phone number" class="form-control">
</div>
<i class="waves-effect blue darken-2 btn waves-input-wrapper" style=""><input type="submit" id="Add" value="Add Contact" class="waves-button-input"></i>
<i class="waves-effect blue darken-2 btn waves-input-wrapper" style=""><input type="button" id="Cancel" value="Cancel" class="waves-button-input"></i>
</form></div>
<div id="contact-items">
<ul id="names" class="collection with-header">
<li class="collection-item">
<a href="#"><i class="fas fa-user text-blue "></i><span class="text-grey">So </span></a>
<span class="contact-phone"><i class="fas fa-phone text-blue phi "><span class="text-grey ph">9999999999</span></i></span>
<i class="far fa-trash-alt delete" data-phone="9999999999"></i>
</li>
<li class="collection-item">
<a href="#"><i class="fas fa-user text-blue "></i><span class="text-grey">Moniu </span></a>
<span class="contact-phone"><i class="fas fa-phone text-blue phi "><span class="text-grey ph">777777777777</span></i></span>
<i class="far fa-trash-alt delete" data-phone="777777777777"></i>
</li>
<!--
<li class="collection-header">
<h5>A</h5>
</li>
<li class="collection-item">
<a href="#"><i class="fas fa-user"></i>Abe</a>
<i class="fas fa-phone">+40 726998877</i>
</div>
</li>
</ul>
-->
</ul></div>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="script.js"></script>
</body><i>
</i>
``
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convert Wavelength to Hex</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
</head>
<body>
<div class="container">
<i> </i> <h1 class="center-align" id="htitle">
<i> </i> <i class="fas fa-address-book fa-lg text-blue"></i> My<span class="text-blue">Phone</span>Book</h1>
<i> </i> <i class="fas fa-search"></i> <input type="text" id="filterInput" placeholder="Search a contact...">
<i> </i> <!-- Add a Contact-->
<i> </i> <div class="quickadd">
<i> </i> <button id="QuickAdd" class="waves-effect blue darken-2 btn">+ Add New Contact</button>
<i> </i> </div>
<i> </i> <div class="quickaddForm">
<i> </i> <form id="book-form">
<i> </i> <div class="form-group">
<i> </i> <input type="text" id="name" placeholder="Add a name" class="form-control">
<i> </i> </div>
<i> </i> <div class="form-group">
<i> </i> <input type="text" id="phone" placeholder="Add a phone number" class="form-control">
<i> </i> </div>
<i> </i> <i class="waves-effect blue darken-2 btn waves-input-wrapper" style=""><input type="submit" id="Add"
<i> </i> value="Add Contact" class="waves-button-input"></i>
<i> </i> <i class="waves-effect blue darken-2 btn waves-input-wrapper" style=""><input type="button" id="Cancel"
<i> </i> value="Cancel" class="waves-button-input"></i>
<i> </i> </form>
<i> </i> </div>
<i> </i> <div id="contact-items">
<i> </i> <ul id="names" class="collection with-header">
<i> </i> <li class="collection-item">
<i> </i> <a href="#"><i class="fas fa-user text-blue "></i><span class="text-grey">So </span></a>
<i> </i> <span class="contact-phone"><i class="fas fa-phone text-blue phi "><span
<i> </i> class="text-grey ph">9999999999</span></i></span>
<i> </i> <i class="far fa-trash-alt delete" data-phone="9999999999"></i>
<i> </i> </li>
<i> </i> <li class="collection-item">
<i> </i> <a href="#"><i class="fas fa-user text-blue "></i><span class="text-grey">Moniu </span></a>
<i> </i> <span class="contact-phone"><i class="fas fa-phone text-blue phi "><span
<i> </i> class="text-grey ph">777777777777</span></i></span>
<i> </i> <i class="far fa-trash-alt delete" data-phone="777777777777"></i>
<i> </i> </li>
<i> </i> </ul>
<i> </i> </div>
<i> </i></div>
<i> </i><script>
<i> </i> const contacts = [
<i> </i> { phone: "9999999999", name: "So" },
<i> </i> { phone: "777777777777", name: "Moniu" }
<i> </i> ];
<i> </i> function removeContact(phone) {
<i> </i> // const contacts = Store.getContact();
<i> </i> contacts.forEach((contact, index) => {
<i> </i> console.log(phone);
<i> </i> if (contact.phone === phone) {
<i> </i> contacts.splice(index, 1);
<i> </i> }
<i> </i> });
<i> </i> localStorage.setItem('contacts', JSON.stringify(contacts));
<i> </i> }
<i> </i> const delButtons = document.querySelectorAll('#contact-items .delete');
<i> </i> for (let i = 0; i < delButtons.length; i++) {
<i> </i> delButtons[i].addEventListener('click', function () {
<i> </i> const phone = this.getAttribute('data-phone');
<i> </i> console.log(phone);
<i> </i> removeContact(phone);
<i> </i> });
<i> </i> }
<i> </i></script>
</body>
</html>
Result: This is working fine, when viewing the local storage the item has been deleted correctly. static addContactToList(contact) {
const itemDiv = document.querySelector('#contact-items');
const list = document.querySelector('#names');
<i> </i>list.insertAdjacentHTML("afterbegin", <span><code>
<i> </i> &lt;/li&gt;
<i> </i> &lt;li class="collection-item"&gt;
<i> </i>
&lt;a href="#"&gt;&lt;i class="fas fa-user text-blue "&gt;&lt;/i&gt;&lt;span class="text-grey"&gt;${contact.name} &lt;/span&gt;&lt;/a&gt;
<br/>
<i> </i> &lt;span class="contact-phone"&gt;&lt;i class="fas fa-phone text-blue phi "&gt;&lt;span class="text-grey ph"&gt;${contact.phone}&lt;/span&gt;&lt;/i&gt;&lt;/span&gt;
<i> </i>
<i> </i>&lt;i class="far fa-trash-alt delete" data-phone="${contact.phone}"&gt;&lt;/i&gt;
&lt;/li&gt; </code></span>);
<i> </i>// add event listener to the delete button that has been added
<i> </i>const delButton = document.querySelector("#contact-items .delete[data-phone='" + contact.phone + "']");
<i> </i>delButton.addEventListener('click', function () {
<i> </i> const phone = this.getAttribute('data-phone');
<i> </i> console.log(phone);
<i> </i> Store.removeContact(phone);
<i> </i>});
}
0.1.9 — BETA 4.23