Question

我有一个HTML表单代码如下

   <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" />

点击后添加更多上述所有文本框，但按钮仍然可见，我想隐藏该按钮

以下是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

尝试此操作：使用this对象获取按钮并更改其显示属性。

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';
    }

或 - 将按钮保留在foo div内，您的代码将按原样运行

<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

您使用jQuery标记了问题，为什么不使用它呢？

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 3

＆＃13;

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';
    }

＆＃13;

<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" />

＆＃13;

试试这个。

Answer 4

为您的代码添加ID

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

在jquery下使用

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

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

我想在javascript中隐藏按钮

4 个答案: