I want to delete the div element without changing any of the html code with js

Question

I'm making a plugin with tempermonkey where I want to delete the div where the button is inside, but the div element doesn't have an id, only a class thats used for different elements. I only want to delete the one where the button is pressed. Thank you.

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

is the div's location always the exact same in the tree? if that's the case you could reference it by it's absolute index number(s) — Dani
– Dani, Commented May 21, 2019 at 23:32

qelli · Accepted Answer · 2019-05-21 23:41:32Z

Removing a div element will be a change to HTML, otherwise you might want to hide it.

But to remove an element from the DOM when it is clicked with a button, you can try:

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>

You can try setting a variable containing an array of elements that can be removed. And then handle the click of the element to remove it with:

parentNode.removeChild(element)

It will remove any item with class="tasksAndMaterials__label" when it is clicked.

chatnoir · Accepted Answer · 2019-05-21 23:56:29Z

There are more elegant ways to write your code (e.g. using a for-loop), but your code works, and for the purposes of instruction I will attempt to add to it instead of re-writing it. What you want is to add something like this:

document.getElementsByClassName("tasksAndMaterials__label")[x].addEventListener("click", function (event) {
        this.style.display = "none";

For simplicity I've added the .addEventListener on the enclosing div rather than the button, which still works because of event bubbling (i.e. the click event bubbles up to the enclosing element). Otherwise you can add the listener to the button itself and then target the .parentNode to hide or delete as necessary.

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";
    btn.style.color = "inherit"; 
    document.getElementsByClassName("tasksAndMaterials__label")[x].appendChild(btn);

    // add this line
    document.getElementsByClassName("tasksAndMaterials__label")[x].addEventListener("click", function (event) {
        this.style.display = "none";
    });
}

<div class ="tasksAndMaterials__label" style="color:blue"></div>
<div class ="tasksAndMaterials__label" style="color:black"></div>
<div class ="tasksAndMaterials__label" style="color:green"></div>
<div class ="tasksAndMaterials__label" style="color:red"></div>

Collectives™ on Stack Overflow

I want to delete the div element without changing any of the html code with js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related