How to remove array element from DOM using filter method?

July 11, 2022

I’m adding data using insertAdjacentHTML

<div class="container"></div>

Then I defined container variable as below

 let containerEl = document.querySelector(".container");

Added data in array

let person = [
                    {
                        id: 1,
                        fname: 'john',
                        birth: 'Jun 2018',
                        education: {
                            degree: 'MBA',
                            university: 'University 1'
                        }
                    },
                    {
                        id: 2,
                        fname: 'Singh',
                        birth: 'Aug 2020',
                        education: {
                            degree: 'MA',
                            university: 'University 2'
                        }
                    },
                    {
                        id: 3,
                        fname: 'Alia',
                        birth: 'Jan 2017',
                        education: {
                            degree: 'BA',
                            university: 'University 3'
                        }
                    }
    
                ];

Then I loop through data using map function

const markUp = person.map((item) => {
                return `<ul>
                                    <li><span>Name:</span> ${item.fname}</li>
                                    <li><span>Birth:</span> ${item.birth}</li>
                                    <ul>
                                        <li><p>Education</p>
                                            <ul>
                                                <li><span>Degree:</span><span> ${item.education.degree}</span></li>
                                                <li><span>University:</span><span> ${item.education.university}</span></li>
                                            </ul>
                                        </li>
                                    </ul> 
                                    <li><button onclick="removeItem(${item.id})" class="deleteItem">Delete</button></li>
                            </ul>`
            }).join(''); 
containerEl.insertAdjacentHTML('afterbegin', markUp);

After displaying data in the DOM I want to remove from on DELETE button click, but that is not working, I’m able to remove data from array but can’t remove from dom.

function removeItem(id) {
    person = person.filter(currentId => currentId.id !== id);
}

>Solution :

It’s better to use a function that update the DOM, each time you remove an item, remove from the array and also re-render data to The DOM

let persons = [
  {
    id: 1,
    fname: "john",
    birth: "Jun 2018",
    education: {
      degree: "MBA",
      university: "University 1",
    },
  },
  {
    id: 2,
    fname: "Singh",
    birth: "Aug 2020",
    education: {
      degree: "MA",
      university: "University 2",
    },
  },
  {
    id: 3,
    fname: "Alia",
    birth: "Jan 2017",
    education: {
      degree: "BA",
      university: "University 3",
    },
  },
];
let containerEl = document.querySelector(".container");
function renderToDOM(persons) {
  const markUp = persons
    .map((item) => {
      return `<ul>
                        <li><span>Name:</span> ${item.fname}</li>
                        <li><span>Birth:</span> ${item.birth}</li>
                        <ul>
                            <li><p>Education</p>
                                <ul>
                                    <li><span>Degree:</span><span> ${item.education.degree}</span></li>
                                    <li><span>University:</span><span> ${item.education.university}</span></li>
                                </ul>
                            </li>
                        </ul> 
                        <li><button onclick="removeItem(${item.id})" class="deleteItem">Delete</button></li>
                </ul>`;
    })
    .join("");
  containerEl.innerHTML = markUp;
}
//first render it to The dom
renderToDOM(persons);

function removeItem(id) {
  persons = persons.filter((currentId) => currentId.id !== id);
  renderToDOM(persons);
}