There is a website with the following div:

<div  style="user-select: none; filter: blur(4px);">

under this div there are a lot of other divs. I would like to know if there is any possibility to delete only this DIV with javascript. So only that one gets deleted and all the divs underneath remain.

I want to get rid of this DIV becouse this div blurs an part of the website text. Just changing the blur(4px) wont work the website has some kind of protection what refreshes this part back to original. the reason i am searching for an possibility in javascript is because i want to automate this in the browser.(Just deleting DIV manually under developer mode works)

so far i got the following:

var div = document.getElementsByClassName('page-content');
div.remove();  //(but this does not work)

CodePudding user response：

getElementsByClassName() returns a collection. Only single objects have remove() method. You have to apply one of the following:

1. Use brackets to specify an index of the object you want to get:

div[0].remove()

2. Use item() method passing the index as well:

div.item(0).remove()

Both ways are equivalent.

As an alternative, you may call querySelector() method:

const div = document.querySelector('.page-content')

It returns a single object (according to the passed CSS selector) so you can use:

div.remove()

Edit:

To remove only the covering div, you may use replaceWith() method and pass the child nodes of that div as an argument:

div.replaceWith(...div.childNodes)

If you want to keep only element nodes, use children property:

div.replaceWith(...div.children)