如何使用 jquery 或普通 JS 从 div 中删除子元素

Question

我有一个用户卡列表。 该卡包含添加和删除按钮。
当我单击删除按钮时，我想从卡列表中删除该卡。

代码类似于以下内容：

// function to generate card
function generateUserCard(id) {
  return `
    <div class="user-card" id="${id}">
      <button data-id="${id}" class="add" >Add</button>
      <button data-id="${id}" class="remove" >Remove</button>
    </div>
  `;
}

// function to generate list of user 
function generateUsers(users) {
  const userGrid = $("#user-grid");
  for(let user of users) {
    const userCard = generateUserCard(user.id);
    userGrid.append(userCard);
    // adding event listeners
    $(`[data-id=${user.id}]`).on("click", function() {
       // I did something like this
       (`#${user.id}`).remove(); // But this didn't work
    })
  }
}

请帮忙！

Answer 1

您的点击事件回调中使用的逻辑存在几个问题：

• 在回调中无法访问变量id 。 一个快速解决方法是修复引用，以便您在选择器中使用user.id 此外，您可以简单地通过 ID 删除它，而无需在其父元素中搜索它，因为它是唯一的。
• 您的选择器[data-id]=${user.id}在语法上不正确。 我想你的意思是[data-id=${user.id}]
• 您应该使用.remove()删除节点

快速修复将如下所示：

$(`button[data-id=${user.id}].remove`).on("click", function() {
   $(`#${user.id}`).remove();
});

请参阅下面的概念验证：

 function generateUserCard(id) { return ` <div class="user-card" id="${id}"> User ID: ${id} <button data-id="${id}" class="add" >Add</button> <button data-id="${id}" class="remove" >Remove</button> </div> `; } function generateUsers(users) { const userGrid = $("#user-grid"); for (let user of users) { const userCard = generateUserCard(user.id); userGrid.append(userCard); $(`button[data-id=${user.id}].remove`).on("click", function() { $(`#${user.id}`).remove(); }) } } // For demo only let i = 0; $('#btn').on('click', function() { const userArray = []; for (let j = 0; j < 3; j++) { i++; userArray.push({ id: i }); } generateUsers(userArray); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn">Generate users</button> <div id="user-grid"></div>

但是，对您的代码的改进将是避免向所有新添加的元素添加新的单击事件侦听器。 您可以简单地监听点击事件冒泡到运行时已经存在的父级（例如#user-grid ），并且您可以将其绑定到generateUsers函数之外：

$('#user-grid').on('click', 'button.add, button.remove', function() {
  const id = $(this).attr('data-id');
  $(`#${id}`).remove();
});

请参阅下面的概念验证：

 function generateUserCard(id) { return ` <div class="user-card" id="${id}"> User ID: ${id} <button data-id="${id}" class="add" >Add</button> <button data-id="${id}" class="remove" >Remove</button> </div> `; } function generateUsers(users) { const userGrid = $("#user-grid"); for (let user of users) { const userCard = generateUserCard(user.id); userGrid.append(userCard); } } // Listen to event bubbling instead! $('#user-grid').on('click', 'button.remove', function() { const id = $(this).attr('data-id'); $(`#${id}`).remove(); }); // For demo only let i = 0; $('#btn').on('click', function() { const userArray = []; for (let j = 0; j < 3; j++) { i++; userArray.push({ id: i }); } generateUsers(userArray); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="btn">Generate users</button> <div id="user-grid"></div>