Element removed reappears after refresh

Add-ons Development
#1

Hi! This is my first time making a Firefox extension. I want to make an extension that hides Pinterest comments.

I followed an official tutorial and it works, but after I refresh the page, the comments appear again. What did I do wrong?

Here is my code:

document.querySelector("[data-test-id='description-content-container']").remove();

I looked at the source code of the Pinterest page and it seems that the comments are contained in a div with the attribute data-test-id with the value description-content-container.

#2

It’s not great to use JavaScript for hiding parts of the page.
Many modern pages loads asynchronously, and can re-create elements when data changes.

Instead, use CSS, for example this should have a same effect:

[data-test-id='description-content-container'] {
    display: none;
}
2 Likes
#3

It worked, thank you for informing me of this! :smile:

1 Like
#4

Hey @hamdorable! To answer your question, you didn’t do anything wrong, it’s just that the snippet of code that you shared probably isn’t doing quite what you expected.

In it’s most basic form, a JavaScript file executes a series of commands from the top of the file to the bottom. In computer science terms, JavaScript is an imperative programming language. I’m assuming the JavaScript snippet you provided was included in a content script. If that’s the case, the snippet is probably being called while the page is loading, so the comment you’re trying to hide may not even be part of the document yet.

CSS, on the other hand, is a declarative programming language; rather than providing a series of commands that you want to execute, you declare what you want to happen and let the browser handle the process of figuring out when and where your style rules should be applied.

Hope that sheds a bit more light on why one approach worked as expected and the other didn’t!