CODEWITHSUNDEEP
javascripthtml
Atakan
Atakan

Reputation: 91

object deletion with javascript

I created a todo-list using javascript and want to create a Remove button. how should I do the method to make it happen

I just want to perform this operation with the help of the button. 

let id = 3;
let todos = [{
    id: 1,
    title: "Javascript"
  },
  {
    id: 2,
    title: "Vue"
  }
];

function render() {
  flen = todos.length;
  text = "<ul id=myUL>";
  for (i = 0; i < flen; i++) {
    text +=
      "<li id=myLI>" +
      todos[i].title +
      "<button style=float:right onClick=removeElement()> Remove </button> " +
      "</li>";
  }
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();

//HERE A METHOD

function removeElement() {}
<div id="demo"></div>

Upvotes: 3

Views: 153

Answers (3)

mplungjan
mplungjan

Reputation: 177692

Have a look at this eventListener I created

It listens for any click in the DEMO div and removes the parent LI if the click was on the button - it is called delegation and I prefer that in vanilla JavaScript and jQuery when you have a list of things in a container.

Updated to remove the id.

I have given an alternative to the filter in the other answer

let id = 3;
let todos = [{
    id: 1,
    title: "Javascript"
  },
  {
    id: 2,
    title: "Vue"
  }
];

function render() {
  text = "<ul id=myUL>";
  todos.forEach(todo =>{ 
    text +=
      "<li id=myLI>" +
      todo.title +
      '<button type="button" data-id="'+todo.id+'" class="rem"> Remove </button>' +
      "</li>";
  })
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();
document.getElementById("demo").addEventListener("click",function(e) {
  var tgt = e.target;
  if (tgt.matches(".rem")) {
    tgt.closest("li").remove(); // or tgt.parentElement.parentElement.remove() for older browsers
    todos.splice(todos.findIndex(el => el.id = tgt.id), 1); // or use filter
    console.log(todos)
  }  
})
.rem { float: right }
<div id="demo"></div>

Upvotes: 2

Cat
Cat

Reputation: 4226

If you give your function a parameter called event, then inside the function, you can get a reference to the clicked button with event.target.
From there, you can "walk" up the DOM tree using Element.parentNode and you can remove a particular child of a particular HTML element with Element.removeChild(childToRemove).

So it could look like:

function removeElement(event){ // The parameter can have any name, but "event" is convenient
  const button = event.target,
        li = button.parentNode,
        ul = li.parentNode;
  ul.removeChild(li);
}

Note that you would need to pass the click event as an argument when the function is called (like onClick=removeElement(event)) so the function can know what you mean by event.target.

Upvotes: 1

klugjo
klugjo

Reputation: 20875

You need to be able to identify each li element properly by setting an id for each inside the for loop.

Then you need to pass that same id to your removeElement() function

Then in your remove, function you can retrieve the li element using getElementById and delete it using node.remove() 

let id = 3;
let todos = [
  {
    id: 1,
    title: "Javascript"
  },
  {
    id: 2,
    title: "Vue"
  }
];
function render() {
  flen = todos.length;
  text = "<ul id=myUL>";
  for (i = 0; i < flen; i++) {
    text +=
      "<li id=\"" + todos[i].id + "\">" +
      todos[i].title +
      "<button style=float:right onClick=removeElement(" + todos[i].id + ")> Remove </button> " +
      "</li>";
  }
  text += "</ul>";
  document.getElementById("demo").innerHTML = text;
}
render();

//HERE A METHOD

function removeElement(idToRemove) {
  // Remove the li element
  document.getElementById(idToRemove).remove();
  
  // Remove the element from the array
  todos = todos.filter(todo => todo.id !== idToRemove);
}
<div id="demo"></div>

Upvotes: 2

Related Questions