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（1个添加功能，1个删除功能）。第一个工作得很好，但第二个（删除） - 只删除第一个（或[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();

注意：您从一个用户开始，然后循环浏览用户列表以添加删除，因此添加新用户时，无法连接点击删除事件。

我删除了循环并在添加新用户时将其连线。

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

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

1 个答案: