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

Question

这是我的 HTML（人员列表）

  <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> 

这是我的 Javascript（一个用于添加，一个用于删除）。第一个效果很好，但第二个（删除） - 只删除第一个（或[0]）元素

 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

试试这个代码：

我将默认模板上的显示更改为隐藏，因此我们还将有一个用户可以从中克隆。否则，用户可以删除所有内容，而我们没有可克隆的内容。

<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>

为了确保我们删除了正确的用户，我添加了一组名称用于测试。

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();

注意：您从一个用户开始，然后循环遍历用户列表以添加删除，因此当添加新用户时，单击删除事件不会被绑定。

在我们添加新用户时，我删除了循环并将其连接起来。

显然，如果我们点击添加用户并且我们的名字用完了，我们的代码将会失败，但这对于我们的测试来说已经足够了。