How to remove an item in an array using an onclick function?

Question

In this code, I am trying to push items into the array and then removing them. If you see below, the create button will give me a blank input and a button that stores it into an array. After it is pushed into the array, the view button goes through the array and displays all the items with the buttons "edit" and "delete" beside it. This is where my problem lies... for each item that is put into the array, it displays it on the Html and has its own buttons. How do I delete that item from the array when I click on a specific delete button?

//variables
var create = document.getElementById("create");
var view = document.getElementById("view");
var display = document.getElementById("display");
var text = document.getElementById("text");
var push = document.getElementById("push");
var arr1 = [];

//create button
create.onclick = function () {
    text.style.display = "inline";
    push.style.display = "inline";
}
//push button
push.onclick = function () {
    arr1.push(text.value);
    push.dataset.u_index;
    console.log(arr1);
    text.value = "";
}
//view button
view.onclick = function () {

for (var i = 0; i < arr1.length; i++) {
    var disp = document.createElement("div");
    disp.innerHTML = arr1[i];
    display.appendChild(disp);
    var edit = document.createElement("button");
    var edit_t = document.createTextNode("Edit");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    var del = document.createElement("button");
    var del_t = document.createTextNode("Delete");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    disp.appendChild(del);
    del.appendChild(del_t);
}
//del button
del.onclick = function () {

    }

}
}

Adam · Accepted Answer · 2016-09-27 00:25:32Z

You need some way of identifying the element you want to delete so it can be tied to the delete function. Here's some code that shows one possible way using data attributes.

//variables
var create = document.getElementById("create");
var view = document.getElementById("view");
var display = document.getElementById("display");
var text = document.getElementById("text");
var push = document.getElementById("push");
var results = document.getElementById("results");
var arr1 = [];

//create button
create.onclick = function() {
  text.style.display = "inline";
  push.style.display = "inline";
}

//push button
push.onclick = function() {
  arr1.push(text.value);
  push.dataset.u_index;
  console.log(arr1);
  text.value = "";
}

//view button
view.onclick = function() {
  for (var i = 0; i < arr1.length; i++) {
    var disp = document.createElement("div");
    disp.innerHTML = arr1[i];
    results.appendChild(disp);
    var edit = document.createElement("button");
    var edit_t = document.createTextNode("Edit");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    var del = document.createElement("button");
    var del_t = document.createTextNode("Delete");
    disp.appendChild(edit);
    edit.appendChild(edit_t);
    disp.appendChild(del);
    del.appendChild(del_t);
    del.setAttribute('data-item-index', i);

    //set onclick fn for del button
    del.onclick = function() {
      var itemIndex = this.getAttribute('data-item-index');
      arr1.splice(itemIndex, 1);
      console.log(arr1);
      results.innerHTML = '';
      view.click();
    };
  }
}

<div id='display'>
  <button id="create">Create</button>
  <div>
    <input type="text" id='text'>
    <button id='push'>Push</button>
  </div>
  <button id='view'>View</button>
  <div id='results'></div>
</div>

Collectives™ on Stack Overflow

How to remove an item in an array using an onclick function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related