How can I add a clear button for each todo list individually in this code?

Question

https://codepen.io/decryptus007/pen/VwvvbzV

Answer 1

// one function to modify, one function to add:

var todoMaker = function(text) {
var todo = document.createElement('li');
todo.textContent = text;

var del_btn = document.createElement('button');
del_btn.className = 'del-todo-item-btn';
del_btn.innerHTML = '&times';
todo.appendChild(del_btn);
todoList.appendChild(todo);
del_btn.onclick = del_todo_item;
}

function del_todo_item(e) {
var todo = e.target.parentNode;
todo.parentNode.removeChild(todo);
}

// and for the css, at least:

li button { float:right; }

but if you don't plan to check if the todo-item string is blank (ie: empty or only spaces), you would probably need add this to the <li> css rules:

li { height:1em; }

Answer 2

Why a codepen link, as we have an excellent code playground here?... clicking this kind of link is annoying because leave the app and open a browser, where with a code playground link you'll just open the project in the app^^

Answer 3

Noted. Thanks, so do you have any solution to my problem??

Answer 4

Post your code here, and I would try to throw an eye upon it ;)

Answer 5

https://code.sololearn.com/WwoZ37QT4bJW

Answer 6

Oh, I've forgot to include your localstorage handling: I guess you could do it yourself, else let me know ;)

Answer 7

It worked perferctly fine thanks.
Pleasehow can I get your SM contact for further aides like this

Answer 8

I don't know what's SM and I don't use those messageries nor any "social" network...
If you want to contact me specifically you could either mention me, or post a comment on of my public code: I will receive notification and if I'm available, I will come to you ^^

Answer 9

how am I gonna apply the local storage clear to the del button because when I applied the `localStorage.clear()` method it's clearing all list

Answer 10

Update your live array, and save its json string once updated (the old json string stored in localstorage will be replaced by the new one).

Answer 11

Thanks