1

I am trying to learn JS by creating simple todolist, and have problem to delete the list

function addTodo(e) {

    e.preventDefault()
    const val = document.getElementById('list-input').value;
    const li = createNewTask(val);
    ul.appendChild(li);
    resetForm.reset();
    return ul
}
const createNewTask = function (val) {

    const listItem = document.createElement('li');
    const deleteBtn = document.createElement('button')

    const valNode = document.createTextNode(val)

    //Modified each element
    deleteBtn.innerText = 'Delete';
    deleteBtn.className = 'delete';

    //append each child
    listItem.appendChild(valNode)
    listItem.appendChild(deleteBtn)

    return listItem;
}

I manage to add new Todo list to my simple app, but I can't figure it out how to delete it.

you can see it in action through this link http://jsbin.com/qunefum/edit?html,js,output

have watched and read some documentations, but can't figure out how to point to the correct element, also all the example seems too complicated

Mirza Chilman
  • 429
  • 1
  • 6
  • 22
  • Do you mean https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild ? – Pogrindis Aug 30 '18 at 13:11
  • my problem is how to delete the correct element, i cant figure it out how to point to the correct element – Mirza Chilman Aug 30 '18 at 13:12
  • 1
    https://stackoverflow.com/questions/26233933/removing-items-from-a-to-do-list-using-javascript Example : http://jsfiddle.net/g79ssyqv/6/ – Pogrindis Aug 30 '18 at 13:16
  • you could count your amount of elements and then use an incrementor as your ID that you target when removing an element. I.e. count the amount of elements. In the start it'd be 0, so you simply do +1. Your ID is now 1. When you now append again and add another element, it will count 1 element, and do +1, so that has the ID 2 etc. You then target those ID's upon removing the item. – Martin Aug 30 '18 at 13:17
  • I know this is unrelated and probably not what you want, but those things are easier with a framework like Vue: https://jsfiddle.net/boilerplate/vue. Once you understand the basic concepts, you can create powerful things with little code. – Fusseldieb Aug 30 '18 at 13:18
  • @Martin and if i am 1 - 4, remove #3 then try to remove #4 it will be out of index array. – Pogrindis Aug 30 '18 at 13:18
  • I can do this easily with react, it's easy because everything using an object, so i can point it through its ID, in this one i don't have anything, which kinda throws me off – Mirza Chilman Aug 30 '18 at 13:19
  • @Pogrindis that entirely depends on how the solution is constructed. If you append the delete function with the new list item (i.e. the delete button as displayed in his example), you can the parse the ID as a parameter in your delete function. This will always delete the correct element. You can implement a decrement functionality to go with the delete function so that you won't get "out of bounds" in terms of the array. – Martin Aug 30 '18 at 13:20
  • @Pogrindis then start it from 1? – Mirza Chilman Aug 30 '18 at 13:20
  • You could generate a guid when creating your element and set as it's id https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript – Jorgel Aug 30 '18 at 13:21
  • 1
    @MirzaChilman re-indexing after removing an item... XY Problem.. Just read the native way to do it here : https://stackoverflow.com/questions/26233933/removing-items-from-a-to-do-list-using-javascript – Pogrindis Aug 30 '18 at 13:22
  • @Jorgel that add more complexity to my app – Mirza Chilman Aug 30 '18 at 13:22
  • @Pogrindis yes the reference is perfect thanks! – Mirza Chilman Aug 30 '18 at 13:23

0 Answers0