如何使用 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>