CODEWITHSUNDEEP
javascript
Joe Consterdine
Joe Consterdine

Reputation: 1053

Best way to add delete button in to do list

I'm creating a to do list with vanilla JS. I ideally want to keep my adding, deleting functions separate to keep everything tidy.

My issue is if I create a delete button when I add a to do I don't know how to reference the delete button.

JSFiddle: https://jsfiddle.net/ped1j6kf/11/

Any ideas?

Thanks

HTML

<body>
    <!-- Main -->
    <div id="main"></div>
    <!-- Add -->
    <input id="to-do-value" type="text" placeholder="Enter to do">
    <button id="add">Add</button>
<script type="text/javascript" src="main.js"></script>
</body>

JS

// To do

var toDo = {
    cacheDom: function() {
        this.toDo = ['test'];
        this.main = document.getElementById('main');
        this.add = document.getElementById('add');
        this.toDoValue = document.getElementById('to-do-value');
    },
    init: function() {
        this.cacheDom();
        this.bindEvents();
        this.displayToDos();
    },
    bindEvents() {
        this.add.addEventListener("click", this.addToDo.bind(this));
    },
    displayToDos: function() {
        var html = '<ul>';
        for(i=0; i < this.toDo.length; i++) {
            html += '<li>' + this.toDo[i] + '</li>' + '<button>delete</button>';
        }
        html += '</ul>';

        this.main.innerHTML = html;
    },
    addToDo(){
        var toDoValue = this.toDoValue.value;
        this.toDo.push(toDoValue);
        this.displayToDos();
    },
    deleteToDo() {
        console.log("make this delete button work");
    }
}

toDo.init();

Upvotes: 0

Views: 6672

Answers (2)

Max08
Max08

Reputation: 1025

I am assuming you want to reference the delete button so that if some one clicks it you want to perform a delete operation. Easiest way to do this would be :-

html += '<li>' + this.toDo[i] + '<button onclick="deleteSomething(this)">delete</button></li>';

Please note that the button element now comes under li.

and then in the deleteSomething function you get the parent element and delete it :--

function deleteSomething(el){
   val = el.value;
   i = this.toDo.indexOf(val);
   if (i > -1) {
      array.splice(i, 1);
   }
   el.parentElement.remove();

}

Upvotes: 0

Icepickle
Icepickle

Reputation: 12796

With some minor changes, you can make it work the way you have it now.

One of the changes would be that you could theoretically have multiple to do items named the same (for some reason), it might simply be easier to store the todo as an object, and save it in your todo list with an identifier, like so:

addToDo( text ){
    this.toDo.push({ id: this._id++, text: text});
    this.displayToDos();
}

This does require some other minor changes, but it offers the possibility to reference the onClick event directly, like this:

displayToDos: function() {
    var html = '<ul>';
    for(i=0; i < this.toDo.length; i++) {
        html += '<li>' + this.toDo[i].text + '</li>' + '<button onClick="toDo.deleteToDo(' + this.toDo[i].id + ')">delete</button>';
    }
    html += '</ul>';

    this.main.innerHTML = html;
}

You now have both a text that is displayed in the todo list as an Id that can be referenced when you want to delete that data

And then the delete function works like this

deleteToDo( id ) {
  for (var i = 0; i < this.toDo.length; i++) {
    if (this.toDo[i].id === id) {
      // removes 1 item from the array at position i
      this.toDo.splice(i, 1);
      break;
    }
  }
  this.displayToDos();
}


var toDo = {
    _id: 0,
    cacheDom: function() {
        this.toDo = [];
        this.main = document.getElementById('main');
        this.add = document.getElementById('add');
        this.toDoValue = document.getElementById('to-do-value');
    },
    init: function() {
        // must run first
        this.cacheDom();
        this.bindEvents();
        // now it can also allow for adding
        this.addToDo('test');
        this.displayToDos();
    },
    bindEvents() {
        this.add.addEventListener("click", () => this.addToDo(this.toDoValue.value));
    },
    displayToDos: function() {
        var html = '<ul>';
        for(i=0; i < this.toDo.length; i++) {
            html += '<li>' + this.toDo[i].text + '</li>' + '<button onClick="toDo.deleteToDo(' + this.toDo[i].id + ')">delete</button>';
        }
        html += '</ul>';

        this.main.innerHTML = html;
    },
    addToDo( text ){
        var toDoValue = text;
        this.toDo.push({ id: this._id++, text: toDoValue});
        this.displayToDos();
    },
    deleteToDo( id ) {
      for (var i = 0; i < this.toDo.length; i++) {
        if (this.toDo[i].id === id) {
          this.toDo.splice(i, 1);
          break;
        }
      }
      this.displayToDos();
    }
}

toDo.init();
<body>
    <!-- Main -->
    <div id="main"></div>
    <!-- Add -->
    <input id="to-do-value" type="text" placeholder="Enter to do">
    <button id="add">Add</button>
<script type="text/javascript" src="main.js"></script>
</body>

Upvotes: 1

Related Questions