如何删除或清空通过函数参数选择的 HTML 元素？

Posted 2023-03-25

【中文标题】如何删除或清空通过函数参数选择的 HTML 元素？

【英文标题】：How to delete or empty an HTML element selected through function parameter?

【发布时间】：2022-01-12 01:26:57

【问题描述】：

我正在尝试使用 javascript 删除或清空元素，但它必须是我们作为参数传递给函数的元素。例如，它必须在 onClick 上工作，一切都必须动态工作，但我无法让它工作。 到目前为止，这是我的代码：

function deleteElement(selector, type) 
  switch (type) 
    case `$"delete" || "remove"`:
      document.querySelector(selector).remove();
      break;
    case "empty":
      document.querySelector(selector).innerhtml = "";
      break;

    // if user doesn't enter desired outcome, the element will be deleted by default
    default:
      document.querySelector(selector).remove();
      break;
  

我的问题是，如何使用此代码对动态选择的元素执行操作？

【问题讨论】：

将第一个 case 更改为 case 'delete': case 'remove':（在 2 个单独的行上）

case '$"delete" || "remove"': 将只是 case "delete":，请参阅 ***.com/questions/6513585/…

我明白了，但问题是我的选择器，例如，当我单击 div 时如何执行我的代码，而不直接将事件侦听器添加到函数中

你不需要监听器。您正在通过函数手动执行它。

【参考方案1】：

如果您想在触发时不使用选择器删除元素，您可以将this 作为参数而不是选择器传递：

function removeEl(element)
  element.remove();

<div onclick="removeEl(this)">click</div>

如果你想为所有共享同一个类/属性/父级的 div 设置一个事件监听器......你可以这样做：（在这个例子中，你的元素之间的共享选择器是 @987654324 @)

// looping thourgh all 'div's having a 'data-type' attribute
document.querySelectorAll('div[data-type]').forEach(element =>
  // adding a simple onclick event listener
  element.onclick = () => element.remove()
)

<div data-type="hi">Hey</div>
<div data-type="type">Yes sir</div>

【参考方案2】：

我很确定一定有一个更优雅的解决方案，但如果你真的需要一个监听器，你可以这样做：

clickable.addEventListener("click",(selector, type) => deleteElement('section'));

clickable 是一个 DOM 元素，您可以使用 querySelector 进行设置。