JavaScript - Click a button to show and hide input field

Question

I started to mess around with JS yesterday but I'm like the biggest noob ^^,

I'm trying to make a button, that can show and hide a text input box with one click.

I have used createElement("input") to create the box but can anyone help me how to use removeChild properly? =D Cause I can't get it to hide. I want to use just html and js for this

Thanks!

/gruffmeister @ scotland

possible duplicate of [javascript hide/show element](http://stackoverflow.com/questions/6242976/javascript-hide-show-element) — Kristijan Iliev, Sep 13 '15 at 22:11

score 0 · Accepted Answer · answered Sep 13 '15 at 22:05

0

Here's a pure javascript example for you:

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

answered Sep 13 '15 at 22:05

Ragdata

1,156
7
16

Thanks! Just what I was looking for = ) – gruffmeister Sep 16 '15 at 12:13

score 0 · Answer 2 · answered Sep 13 '15 at 22:16

Why not use a simple jQuery approach:

    <!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>

JavaScript - Click a button to show and hide input field

2 Answers2