javascript - 我想删除 div 元素而不用 js 更改任何 html 代码

Question

我正在用 tempermonkey 制作一个插件，我想删除 div 里面有 button，但是 div 元素没有没有 id，只有一个用于不同元素的类。我只想删除按下 button 的那个。谢谢。

   // 1. Create the buttons
   var x;
   var y = document.getElementsByClassName("tasksAndMaterials__label");
     for (x = 0; x < y.length; x++) {
        var br = document.createElement("br");
        document.getElementsByClassName("tasksAndMaterials__label")[x].appendChild(br);
        var btn = document.createElement("BUTTON");
        btn.innerHTML = "Done";
        document.getElementsByClassName("tasksAndMaterials__label")[x].appendChild(btn);
    }

Answer 1

删除 div 元素将改变 HTML，否则您可能希望隐藏它。

但是要在用按钮单击时从 DOM 中删除元素，您可以尝试:

let elements = document.querySelectorAll(".tasksAndMaterials__label");

const remove = (element) =>{
  element.parentNode.removeChild(element);
};

elements.forEach((e)=>{
  let button = document.createElement("button");
  button.innerText = "Done";
  button.addEventListener("click",(event)=>{
    remove(event.target.parentNode);
  });
  e.appendChild(button);
});

<div class="tasksAndMaterials__label">some text 1</div>
<div class="tasksAndMaterials__label">some text 2</div>
<div class="tasksAndMaterials__label">some text 3</div>

您可以尝试设置一个包含可移除元素数组的变量。然后处理元素的点击以将其删除:

parentNode.removeChild(element)

当它被点击时，它会删除任何带有 class="tasksAndMaterials__label" 的项目。