How to delete a certain item of an array?

Question

There are 5 items in a array (which consists objects inside) and it is represented visually by creating some elements in the document as per the array length. Like this:

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

// creating it visually by creating elements.
for(let i = 0; i < array.length; i++) {
  const div = document.createElement("div");
  div.classList.add("DIV");
  div.innerHTML = `
    <span class="Text">${array[i].value}</span>
    <span class="Remove">( Remove )</span>
  `
  document.body.appendChild(div);
}

document.querySelectorAll(".Remove").forEach(elem => {
  elem.addEventListener("click", () => {
    remove();
  }) 
})

function remove() {
  // Now how to remove the specific item from the array?
  
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}
.Remove {
  cursor: pointer;
  height: fit-content;
}

Now I want to remove the 4th element of the array that has the value of "NOT" by clicking the 4th remove button but how can I do that.
( Your code should work in all the elements. ) Any help will be highly appreciated. Thank You.

When you've dynamic elements, it's best to use event delegation instead of a listener for every element. Create a wrapper for the dynamic elements, listen clicks on the wrapper, check the class name of the clicked element, and then remove its parent. — Teemu, Oct 06 '21 at 06:03
The OP also might have a look into [*"How does one establish state-management in between a list of data-items and their element-node representatives in case of removing an item on 'click'? "*](https://stackoverflow.com/questions/69404034/how-does-one-establish-state-management-in-between-a-list-of-data-items-and-thei) — Peter Seliger, Oct 06 '21 at 09:30

Praveen Kumar Purushothaman · Accepted Answer · 2021-10-06T06:08:40.957

In simple terms, add an id or some kind of identifier and use it that way.

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

// creating it visually by creating elements.
for (let i = 0; i < array.length; i++) {
  const div = document.createElement("div");
  div.classList.add("DIV");
  div.innerHTML = `
    <span class="Text">${array[i].value}</span>
    <span class="Remove" data-id="${"elem-" + i}">( Remove )</span>
  `;
  document.body.appendChild(div);
}

document.querySelectorAll(".Remove").forEach(elem => {
  elem.addEventListener("click", () => {
    remove(elem.dataset.id);
  })
})

function remove(id) {
  // Now how to remove the specific item from the array?
  console.log(id);
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.Remove {
  cursor: pointer;
  height: fit-content;
}

The above code will get the dataset now. Using this, remove the element of that id and rerender the view.

let array = [
  {
    "value": "Hello"
  },
  {
    "value": "World"
  },
  {
    "value": "You Can"
  },
  {
    "value": " NOT"
  },
  {
    "value": "<h1>Remove ME!</h1>"
  }
]

function renderElement(array) {
  // creating it visually by creating elements.
  for (let i = 0; i < array.length; i++) {
    const div = document.createElement("div");
    div.classList.add("DIV");
    div.innerHTML = `
      <span class="Text">${array[i].value}</span>
      <span class="Remove" data-id="${"elem-" + i}">( Remove )</span>
    `;
    document.body.appendChild(div);
  }
  document.querySelectorAll(".Remove").forEach(elem => {
    elem.addEventListener("click", () => {
      remove(elem.dataset.id);
    })
  });
}

renderElement(array);

function remove(id) {
  // Now how to remove the specific item from the array?
  // Remove the `elem-` from id.
  array.splice(+id.replace("elem-", ""), 1);
  document.querySelectorAll("body > .DIV").forEach(elem => {
    elem.remove();
  });
  renderElement(array);
}

// I hope this is fully understandable.

/* CSS IS NOT VERY IMPORTANT */

.DIV {
  padding: 10px;
  margin: 10px;
  background: purple;
  color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.Remove {
  cursor: pointer;
  height: fit-content;
}

It is not working properly. I wanted to remove the elements that I have clicked on, It just removes the first item in the array even I clicked at the last element. — user15896047, Oct 06 '21 at 06:07
@user15896047 I fixed it, yea, I was not correctly passing the `id` part. Check now. — Praveen Kumar Purushothaman, Oct 06 '21 at 06:09
Wow, Thank You so much... it was hard for me to figure it out. — user15896047, Oct 06 '21 at 06:14
@user15896047 Yes, I can imagine, coz it was too hard for me too. — Praveen Kumar Purushothaman, Oct 06 '21 at 06:16

How to delete a certain item of an array?

1 Answers1