删除功能无法正常工作。 怎么了？

Question

This is my HTML(list of people)

  <button class="btn btn-primary btn-block" id="add_user">Add new user</button>
    <ul id="users_list" contenteditable="true">       
        <li class="user_data">
            <img      src="http://img.dunyanews.tv/blog_user_images/anchors//15_user_icon.png" alt="44user" class="user_image" />
            <div class="user_data_id text-left">Id:></div>
            <div class="user_data_username text-left">Username:</div>
            <div class="user_data_firstname text-left">Firstname:</div>
            <div class="user_data_lastname text-left">Lastname:</div>
            <button class="btn btn-danger delete_user">X</button>
        </li>
    </ul> 

This is my Javascript (one function for adding and one for deleting). First work well, but second (deleting) - delete only first (or [0] ) element

 var addUser = document.getElementById('add_user'),
    usersList = document.getElementById('users_list'),
    userTemplate = document.getElementsByClassName('user_data');
    deleteUser = document.getElementsByClassName('delete_user');
    
    //Function for adding elements
    addUser.addEventListener('click', (function() {
    var newUser = userTemplate[0].cloneNode(true);
    usersList.appendChild(newUser);        
  }));  
    //Function for deleting element
    for (i = 0; i < deleteUser.length; i++) {
      (function(e) { 
          deleteUser[e].addEventListener('click', (function() {            
            usersList.removeChild(userTemplate[e]);
        }));
      })(i);
    }

Answer 1

Try this code:

I changed the display on the default template to hidden so we will also have one user to clone from. Otherwise, the user can delete all and we have nothing to clone from.

<button class="btn btn-primary btn-block" id="add_user">Add new user</button>
<ul id="users_list" contenteditable="true">
    <--! This display none is important -->
    <li class="user_data" style="display: none;">
        <img src="http://img.dunyanews.tv/blog_user_images/anchors//15_user_icon.png" alt="44user" class="user_image" />
        <div class="user_data_id text-left">Id:></div>
        <div class="user_data_username text-left">Username:</div>
        <div class="user_data_firstname text-left">Firstname:</div>
        <div class="user_data_lastname text-left">Lastname:</div>
        <button class="btn btn-danger delete_user">X</button>
    </li>
</ul>

To make sure we are deleting the correct user, I added an array of names for testing.

var names = ['Noah', 'Sophia', 'Liam', 'Emma', 'Jacob', 'Olivia', 'Mason', 'Isabella', 'William', 'Ava', 'Ethan', 'Mia', 'Michael', 'Emily', 'Alexander', 'Abigail', 'Jayden', 'Madison', 'Daniel', 'Elizabeth'];
var addUser = document.getElementById('add_user'),
    usersList = document.getElementById('users_list'),
    userTemplate = document.getElementsByClassName('user_data');
    deleteUser = document.getElementsByClassName('delete_user');

    //Function for adding elements
    addUser.addEventListener('click', (function() {
        var newUser = userTemplate[0].cloneNode(true);

        // add name to user so we can test.
        newUser.getElementsByClassName('user_data_firstname')[0].innerHTML += ' ' + names.pop();

        // make this user visible
        newUser.style.display = '';

        // Wire click event to remove this user.
        newUser.getElementsByClassName('delete_user')[0].addEventListener('click', (function() {            
            usersList.removeChild(newUser);
        }));

        usersList.appendChild(newUser);
    }));

    // Add one user
    addUser.click();

Note: You start with one user and you loop through the user list to add the remove, so when new users are added, the click to remove event is not wired.

I removed the loop and wire it as we add a new user.

Obviously our code will fail if we click on add users and we run out of names, but that's enough for our test.