Dissappear content with html - html

Question

I was playing with some html and thought I might come across something I can use for my website.
Well, while I was playing with html, I came across hiding html content and so I thought of a code that might do it. Here is my code.
<input type = "checkbox" id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").style.visibility = "hidden"
}
}
</script>
I was wondering if this was the most efficient way to do this, or if can take about the least amount of storage. If not, please help. Thank you.

Answer 1

You are using a checkbox in a wrong way here. We must work with for checked property instead
if(b =="on"){
document.getElementById("demo").style.visibility = "hidden"
}
b=="on" is a truthy string and is always true.
Also, best is to use display:none; instead of hidden.
document.getElementById("demo").style.display= "none";
FULL WORKING CODE: Only when the input is checked and we click on the the below div should disappear (This makes more sense in this example). Try this
<input type = "checkbox" id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on");
console.log(b);
if(b.checked){
document.getElementById("demo").style.display = "none";
}
}
</script>

Answer 2

Well, it really depends on the output your going for. With the code you have, then all that will happen is the element will become transparent. Unfortunately, this also means that the other elements on your page will act like its still their, because it is, you just changed the opacity to 0.
An alternative that would completely remove the element is:
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").remove()
}
}
The above will completely delete the element from your page. Further docs here:https://www.w3schools.com/jsref/met_element_remove.asp
Alternatively again, you could change the display to none. This would combine the above two options, both making it disappear and making it so that other elements will not react to its placement. So unlike the remove() method, this will keep the <p> in your hard code, but make it visually impossible to route out:
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").style.display = "none"
}
}
This last one if probably the most "efficient" as it keeps the element in your code and also stops other elements from interacting with it spacially.

Answer 3

I tried to combine both of your solutions, and here's how it goes. It works beyond expectations of mine
<input type = "checkbox" id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on");
console.log(b);
if(b.checked){
document.getElementById("demo").style.visibility = "hidden";
}
else{
document.getElementById("demo").style.visibility = "visible"
}
}
</script>