CODEWITHSUNDEEP
htmlbutton
user2607534
user2607534

Reputation: 221

How do I hide a button in html?

I am a beginner in HTML. How would I make a button that would hide itself when clicked using JavaScript? This is the code I have already, missing a line.

<!DOCTYPE>
<html>
    <body>
        <button type="button" onclick="delete()" = ;>Hello</button>
        <script>
            var delete = function(){
            //hide button
            }
        </script>
    </body>
</html>

Upvotes: 3

Views: 17643

Answers (5)

mim
mim

Reputation: 41

First add button 'id'

    <button type="button" id='theid' onclick="delete()" = ;>Hello</button>

Then go to the script part 

    <script>
        var delete = function(){
        document.getElementById('theid').style.display="none";  // for hide button
        }
    </script>

Upvotes: 1

Cruizer Blade
Cruizer Blade

Reputation: 36

No need to write too much code, I have edited your code , and you can get the effect just like that,,,

<!DOCTYPE>
<html>
    <body>
        <button type="button" onclick="this.style.display='none'">Hello</button>
    </body>
</html>

Upvotes: 0

jozzy
jozzy

Reputation: 2943

delete is a keyword in js. Use a different name

onclick="deleteThis(this)"



var deleteThis = function(elem){
        elem.style.display = 'none';
        // elem.style.visibility = 'hidden';
};

Upvotes: 7

Domain
Domain

Reputation: 11808

Here is your solution:

<!DOCTYPE html>

<html>

<head>
<title>WisdmLabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<style>

</style>

</head>

<body>

<button type="button" id="myButton" onclick="hideMe()">Click Me To Hide</button>
<script>
function hideMe(){
	$("#myButton").hide();
}
</script>

</body>

</html>

Feel free to ask any doubts or suggestions.

Upvotes: 0

Jaken
Jaken

Reputation: 1343

See documentation for Style Visibility.

Add an ID to your button like this:

<button id="my_button" type="button" onclick="delete()" = ;>Hello</button>

Then in your JavaScript:

document.getElementById("my_button").style.visibility = "hidden";

Upvotes: 0

Related Questions