Event listener only runs when i add a
to a
and not when i remove it

Question

So i am making a todo list. The event does not detect removal of li elements, but only when i add li elements.

i couldn't find any good reference to event types...

What type of evenlistener should i use for detecting both removing and adding

var ul_completed = document.createElement('ul');
ul_completed.id = res_data.list_name + 'completed';
ul_completed.classList = "group";

var li_completed = document.createElement('li');
li_completed.id = res_data.list_name + 'completed_li';

var completed_container = document.createElement('div');
li_completed.classList = 'li_completed';

var li_completed_name = document.createElement('p');
li_completed_name.innerHTML = 'No completed tasks';

ul_completed.addEventListener('change', function(e) {
    console.log('something changed');
    if(this.childElementCount == 1){
        li_completed_name.innerHTML = 'No completed tasks...yet';
    } else {
        li_completed_name.innerHTML = 'Completed tasks';
    }

});

the elements are appended after the eventlistener...

//APPENDING TO COMPLETED

completed_container.appendChild(li_completed_name);
li_completed.appendChild(completed_container);
ul_completed.appendChild(li_completed);

I CAN ONLY USE PLAIN JAVASCRIPT.

keep in mind, i do not want to delete the items. i just want the first li in the list to display a different text when there are more than one li in the ul.

I don't think the change event is emitted in either case (adding or removing a node). — marekful, Nov 28 '17 at 00:31
*I CAN ONLY USE PLAIN JAVASCRIPT.* Why? Is this a HW problem? — jrook, Nov 28 '17 at 00:32
@Pratansyah can only use plain javascript and not Jquery. The question and answer used jquery — RoyalKode, Nov 28 '17 at 00:36
@RoyalKode You sure? https://stackoverflow.com/a/20156615/2131856 — Pratansyah, Nov 28 '17 at 00:37
Why does it matter *why* the OP can't use ? If the requirement is to avoid use of a library that's the OP's prerogative. — David Thomas, Nov 28 '17 at 00:46
@Pratansyah I have 0 knowledge of mutationObserver. No damage done by trying try, thank you :) — RoyalKode, Nov 28 '17 at 00:48
@DavidThomas, I agree that using only plain javascript is a sound requirement. But forbidding html? It is a red flag that this could be a homework problem. Professors sometimes do that in order to prevent students from solving HW problems by using html/css hacks. Writing such a simple program without using any html is odd in my opinion. — jrook, Nov 28 '17 at 04:05
@jrook The thing is...The data that will be contained/inserted/removed in the list is from a database. Therefore no hardcoding elements in HTML. Never said u couldnt use HTML....(or css for that matter), Html code is not what i am asking for. This is an Express app with nodejs...not that it matters. — RoyalKode, Nov 28 '17 at 12:02
@RoyalKode I apologize for making the unwarranted assumption. — jrook, Nov 28 '17 at 18:59

score -1 · Answer 1 · edited Nov 28 '17 at 00:35

-1

Try this:

To delete a list item, call the deleteObject() function on the object. The following example uses the getItemById(id) function to return the second item from the list, and then deletes the item.

follow the link:

https://msdn.microsoft.com/en-us/library/office/hh185011(v=office.14).aspx

edited Nov 28 '17 at 00:35

David Thomas

249,100
51
377
410

answered Nov 28 '17 at 00:34

Alexandru Popescu

1
1

I am not supposed to delete the li item, i did not include the code where i am actually appending it and removing it. – RoyalKode Nov 28 '17 at 00:39
sorry I did not understand you correctly, i think @pratasyah wrote the correct answer – Alexandru Popescu Nov 28 '17 at 00:55

Event listener only runs when i add a to a and not when i remove it

1 Answers1

Event listener only runs when i add a
to a
and not when i remove it