How To Set Display None of <footer> tag with Console?-CodePudding

I'm trying to hide some fields on sites with javascript. For this, I use the console of the relevant browser and here I make that field display = "none"; with ClassName or ID, but I made a few attempts to improve these things a little more.

In these experiments, I only found a field with <footer> tag, but it has neither ClassName nor ID.

document.getElementsByClassName("footer")[0].style.display = "none";

How can I make it invisible with js code? Thank you very much if you can get back to me. I am trying to learn something new.

CodePudding user response：

You can use the document.querySelector() function. This allows you to specify any valid CSS selector, meaning that in this case you can use the element's tag type to identify it.

Demo:

document.querySelector("footer").style.display = "none";

<div>Another div</div>
<footer>Hello</footer>

The code will remove the existing "Hello" message by hiding the footer element. All that's still on display is the "Another div".

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

CodePudding user response：

You can already create a class in CSS with style display: none; and later add or append that class on the footer,

let element = document.querySelector(".footer");

 function hideFooter() {
  element.classList.add("hide");
 }

.hide {
  display: none;
}

<footer >
<!-- footer code -->
<p>This Is Footer </p>
</footer>

<button onClick="hideFooter()"> Hide Footer </button>