如何使用 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();
});

见下文proof-of-concept：

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

见下文proof-of-concept：

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>

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

How to remove child element from div using jquery or normal JS

html

javascript

jquery

dom

ecmascript-2016