Choogy - Javascript Delete Objects

Add Delete Find Filter ForEach IndexOf Map Chain Functions BrowserStorage Promise Back

Delete Object In Array Of Objects

Suppose you want to delete from a dropdown form that a person's name & phone number.

You can use Array.splice to delete with Array.findIndex to locate the element position.

Copy the code below & save file as object.html:

<form>
Delete Name: 
<select id="h_name">
<option value="JOE">Joe</option>
<option value="ROSE">Rose</option>
<option value="TOM">Tom</option>
</select>
</form>

<button type="submit" onclick="show()">Show All Data In Array</button>
<button type="submit" onclick="remove()">Remove Selected Name</button>
<h4>Details:</h4>
<h4 id="out"></h4>

let contacts = [
{ name: "JOE", "contact": "123" },
{ name: "ROSE", "contact": "456" },
{ name: "TOM", contact: "789" }
];

function show() 
{
document.getElementById("out").innerHTML = "";

for (let x in contacts)
{
  document.getElementById("out").innerHTML += "<li>" 
  + contacts[x].name + "</li>" + "<li>" 
  + contacts[x].contact + "</li><hr>";
}
};

function remove() 
{
document.getElementById("out").innerHTML = "";

var h_name = document.getElementById("h_name").value;

for (let x in contacts)
{
if (h_name === contacts[x].name) 
{
let index = contacts.findIndex(i => i.name === h_name.toUpperCase());
let del = contacts.splice(index, 1);
}
}
document.getElementById("out").innerHTML = h_name + " already removed";
};

</script>

Explaination:

We found the element position "index" and delete 1 item using it.