title: DOM manupulation: how to remove an element from list of json data dymically in javascript DOM
body: <p>i want to delete a row by clicking delete button which return an id from JSON data, i have created all the elements in DOM. i am trying to add delete function but it only delete the JSON data it does not delete the DOM. I have tried the Object oriented way but i didn't know how to used them. it will be extremely helpful if there is any suggestion.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let names = {
    nameList: [{
        userId: 1,
        name: "abc",
        age: "25",
      },
      {
        userId: 2,
        name: "def",
        age: "23",
      },
      {
        userId: 3,
        name: "ghi",
        age: "18",
      },
      {
        userId: 4,
        name: "jkl",
        age: "19",
      },
    ],
    find: function() {
      console.log("Find function");
    },
    add: function() {
      return this.nameList[1];
    },
    delete: function() {
      console.log("Delete function");
    },
  };
  
  
  
  const createEle = (data, idx) =&gt; {
    let main = document.createElement("div");
    let container = document.getElementById("container");
    let title = document.createElement('div');
    let age = document.createElement('div');
    let remove = document.createElement('div');
    let update = document.createElement('div');
    main.className = "main";
    title.className = "title";
    age.className = "age";
    remove.className = "delete";
    update.className = "update";
  
    container.appendChild(main);
    main.appendChild(title);
    main.appendChild(age);
    main.appendChild(update);
    main.appendChild(remove);
  
    remove.addEventListener("click", deleteEle.bind(event, idx));
  
    title.append(data.name);
    age.append(data.age);
    update.append("Edit");
    remove.append("Delete");
  
  }
  
  const displayData = () =&gt; {
    names.nameList.map(data =&gt; {
      createEle(data, data.userId);
  
    });
  }
  
  const deleteEle = (idx) =&gt; {
    names.nameList.splice(idx - 1, 1)
    console.log("deleted", idx, names.nameList);
  }
  
  
  
  displayData();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Todo list&lt;/title&gt;
    &lt;link rel="stylesheet" href="./style.css"&gt;
    &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="search"&gt;
      &lt;input type="text" value="" class="input"&gt;
      &lt;button class="find"&gt;Find&lt;/button&gt;
      &lt;button class="add"&gt;Add&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="container" id="container"&gt;&lt;/div&gt;
    &lt;script src="./script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>