如何让事件目标在另一函数中可访问？解决deleteUser中DOM删除代码不可用问题

Hey there! Let's break down why that DOM removal line isn't working in your deleteUser function and walk through some solid fixes.

Common Reasons the Line Isn't Accessible #

Most often, this issue happens because:

• The event object (e) isn't being passed correctly to deleteUser
• You're relying on fragile parentNode nesting that might break if your DOM structure changes
• The function's context doesn't have access to the event target you're trying to manipulate

Solution 1: Pass the Event Object Directly #

If you're calling deleteUser from an inline event handler (like in HTML), make sure you explicitly pass the event:

HTML:

<button onclick="deleteUser(event)">Delete User</button>

JavaScript:

function deleteUser(e) {
  // Now e is available here!
  const parentElement = e.target.parentNode;
  parentElement.parentNode.removeChild(parentElement);
  
  // Bonus: Modern browsers let you simplify this to just:
  // e.target.parentNode.remove();
}

Solution 2: Pass the Target Element Directly (No Event Needed) #

Instead of relying on the event object, pass the button (or the element you want to remove's parent) directly to the function. This avoids event context issues entirely:

HTML:

<tr>
  <td>John Doe</td>
  <td><button onclick="deleteUser(this)">Delete</button></td>
</tr>

JavaScript:

function deleteUser(button) {
  // Get the row we want to remove (adjust based on your DOM structure)
  const rowToDelete = button.parentNode.parentNode;
  rowToDelete.parentNode.removeChild(rowToDelete);
  
  // Or use the modern shorthand:
  // rowToDelete.remove();
}

Solution 3: Use Event Delegation (Most Robust) #

If you're dynamically adding users (so delete buttons aren't present on page load), event delegation is the way to go. It's also more resilient to DOM structure changes:

HTML:

<table id="userTable">
  <!-- User rows get added here dynamically -->
</table>

JavaScript:

// Bind the event to a parent element that exists on page load
document.getElementById('userTable').addEventListener('click', function(e) {
  // Check if the clicked element is a delete button
  if (e.target.matches('.delete-btn')) {
    // Find the closest parent row (way better than counting parentNodes!)
    const rowToDelete = e.target.closest('tr');
    if (rowToDelete) {
      rowToDelete.remove(); // Clean, modern way to remove elements
    }
  }
});

Using closest() is way more reliable than chaining parentNode—if you ever adjust your DOM structure (like adding a wrapper div around the button), your code won't break.

内容的提问来源于stack exchange，提问作者codeDragon