JavaScript - 单击按钮以显示和隐藏输入字段答案

【问题标题】：JavaScript - Click a button to show and hide input fieldJavaScript - 单击按钮以显示和隐藏输入字段
【发布时间】：2015-09-13 21:50:43
【问题描述】：

我昨天开始玩JS，但我就像最大的菜鸟^^，

我正在尝试制作一个按钮，可以一键显示和隐藏文本输入框。

我已经使用createElement("input") 创建了该框，但谁能帮助我如何正确使用 removeChild？ =D 因为我无法隐藏它。我只想为此使用 html 和 js

谢谢！

/gruffmeister@苏格兰

【问题讨论】：

javascript hide/show element 的可能重复项

标签： javascript html button input show

【解决方案1】：

这是一个纯 JavaScript 示例：

var elem = document.createElement("input");
var btn  = document.createElement("button");
var txt  = document.createTextNode("Hide Input");

elem.id = "hideme";

btn.appendChild(txt);

document.body.appendChild(elem);
document.body.appendChild(btn);

btn.addEventListener( 'click', function(){
    var input = document.getElementById("hideme");
    document.body.removeChild(input);
} );

【讨论】：

谢谢！正是我想要的 = )

【解决方案2】：

为什么不使用简单的 jQuery 方法：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(function() {
        $('button').click(function() {
          $('p').toggle;
          $("#myTextField").toggle();
        });
    });
    </script>
    </head>
    <body>
    <button>Toggle</button>
    <input id="myTextField" type="text" name="myTextField" value="">
    </body>
    </html>

【讨论】：