Javascript 删除函数不使用'；我不能正常工作。什么'；怎么了？

这是我的HTML（人员列表）

请尝试以下代码：

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

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

注意：您从一个用户开始，然后在用户列表中循环添加删除，因此添加新用户时，不会连接单击删除事件

我删除了循环，并在添加新用户时连接它

---

显然，如果我们单击“添加用户”按钮，我们的代码将失败，名称也将用尽，但这对于我们的测试来说已经足够了。

它可以工作，但我只需要在单击“X”按钮时执行删除操作，伙计！（你帮了我很多）

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

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