[javascript] Making a button invisible by clicking another button in HTML

How can I make a button invisible by clicking another button in HTML?
I have written like below, but it doesn't work.

<input type="button" onclick="demoShow();" value="edit" />
<script type="text/javascript"> 
    function demoShow()
    { document.getElementsByName('p2').style.visibility="hidden"; }
</script>
<input id="p2" type="submit" value="submit" name="submit" />

Try this

<input type="button" onclick="demoShow()" value="edit" />
<script type="text/javascript"> 
function demoShow()
{p2.style.visibility="hidden";}
</script>
<input id="p2" type="submit" value="submit" name="submit" />

http://jsbin.com/gurolawu/1/

I found problems with the elements being moved around using some of the above, so if you have objects next to each other that you want to just swap this worked best for me

document.getElementById('uncheckAll').hidden = false;
document.getElementById('checkAll').hidden = true;

write this

To hide

{document.getElementById("p2").style.display="none";}

to show

{document.getElementById("p2").style.display="block";}

Using jQuery!

var demoShow = function(){
    $("#p2").hide();
}

But I would recommend you give an id to your button on which you want an action to happen. For example:

<input type="button" id="p1" value="edit" />
<input type="button" id="p2" value="submit" name="submit" />

<script type="text/javascript"> 
$("#p1").click(function(){
    $("#p2").hide();
});
</script>

To show it again you can simply write: $("#p2").show();

try this

function demoShow() {   
document.getElementById("but1").style.display="none";

}



<input type="button" value="click me" onclick="demoShow()" id="but" />

<input type="button" value="hide" id="but1" />

For Visible:

document.getElementById("test").style.visibility="visible";

For Invisible:

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

Use this code :

<input type="button" onclick="demoShow()" value="edit" />
<script type="text/javascript"> 
function demoShow()
{document.getElementById("p2").style.visibility="hidden";}
</script>
<input id="p2" type="submit" value="submit" name="submit" />

Use the id of the element to do the same.

document.getElementById(id).style.visibility = 'hidden';

$( "#btn1" ).click(function() {
 $('#btn2').css('display','none');
});

1. getElementById returns a single object for which you can specify the style.So, the above explanation is correct.

2. getElementsByTagName returns multiple objects(array of objects and properties) for which we cannot apply the style directly.

To get an element by its ID, use this:

document.getElementById("p2")

Instead of:

document.getElementsByName("p2")

So the final product would be:

document.getElementsById("p2").style.visibility = "hidden";