我想在javascript中隐藏按钮

Question

I have a HTML form code is as follows

   <div id="foo" style="display:none;">
   <input type="text" name="name">
   <input type="text" name="name1">
   <input type="text" name="name2">
   </div>
   <input type="button" onclick="toggle_visibility('foo');" 
   value="Add more" />   

Upon clicking add more all the above textboxes, but the button is still visible and i want to hide that button

Following is the javascript

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

Answer 1

Try this : Use this object to get button and change its display property.

function toggle_visibility(id) {
       //hide button
       this.style.display = 'none';
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

OR - keep button inside foo div and your code will work as it is

<div id="foo" style="display:none;">
   <input type="text" name="name">
   <input type="text" name="name1">
   <input type="text" name="name2">

   <input type="button" onclick="toggle_visibility('foo');" 
   value="Add more" /> 
</div>

Answer 2

You tagged the question with jQuery , so why not use it?

 $("input[type=button]").click(function() { $("#foo").show(); $(this).hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo" style="display:none;"> <input type="text" name="name"> <input type="text" name="name1"> <input type="text" name="name2"> </div> <input type="button" value="Add more" /> 

Answer 3

 function toggle_visibility(btn,id) { //hide button btn.style.display = 'none'; var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <div id="foo" style="display:none;"> <input type="text" name="name"> <input type="text" name="name1"> <input type="text" name="name2"> </div> <input type="button" onclick="toggle_visibility(this,'foo');" value="Add more" /> 

Try this.

Answer 4

Give id to your tag

<button type="button" id='btnclick'>Add More</button>

use below jquery

$("#btnclick").click(function(){

    $("#btnclick").hide();
}
});