Hola, estoy tratando de implementar un javascript que sencillamente lo que hace es al presionar un botón "Quiero registrarme" abra una serie de inputs para introducir datos personales como nombre, apellido, edad, etcétera. El problema es que yo quiero que el usuario presione una sola vez el botón "Quiero registrarme" y luego este desaparezca (No que se oculte, sino que se borre). Sin mas preámbulos les muestro mi código:

function mostrar_registro() {
				if (registrarseOn == false) {
					var nombre = document.createElement('input');
						nombre.setAttribute('name','nombre');
						nombre.setAttribute('value','Ingrese su nombre aqui.');
					var email = document.createElement('input');
						email.setAttribute('name','email');
						email.setAttribute('value','Ingrese su email de usuario aqui.');
					var apellido = document.createElement('input');
						apellido.setAttribute('name','apellido');
						apellido.setAttribute('value','Ingrese su apellido aqui.');
					var nick = document.createElement('input');
						nick.setAttribute('name','nick');
						nick.setAttribute('value','Ingrese su nick aqui.');
					var universidad = document.createElement('input');
						universidad.setAttribute('name','universidad');
						universidad.setAttribute('value','Ingrese su universidad aqui.');
					var edad = document.createElement('input');
						edad.setAttribute('name','edad');
						edad.setAttribute('value','Ingrese su edad aqui.');
 
					var p1 = document.createElement('p');
					var p2 = document.createElement('p');
					var p3 = document.createElement('p');
					var p4 = document.createElement('p');
					var p5 = document.createElement('p');
					var p6 = document.createElement('p');
 
					p1.appendChild(document.createTextNode("Ingrese su email"));
					p1.appendChild(email);
					p2.appendChild(document.createTextNode("Ingrese su nick"));
					p2.appendChild(nick);
					p3.appendChild(document.createTextNode("Ingrese su nombre"));
					p3.appendChild(nombre);
					p4.appendChild(document.createTextNode("Ingrese su apellido"));
					p4.appendChild(apellido);
					p5.appendChild(document.createTextNode("Ingrese su edad"));
					p5.appendChild(edad);
					p6.appendChild(document.createTextNode("Ingrese su universidad"));
					p6.appendChild(universidad);
 
					document.registrar.appendChild(p1);
					document.registrar.appendChild(p2);
					document.registrar.appendChild(p3);
					document.registrar.appendChild(p4);
					document.registrar.appendChild(p5);
					document.registrar.appendChild(p6);
					registrarseOn=true;
                                        //Esta es la linea que me da problemas!
					document.registrar.removeChild(document.registrar.resitrarse);
				}	
			}
		</script>

La parte del HTML que tendría que borrar seria:

<div id="form_registro">
			<form name="registrar" method="POST" action="registrar.php">
				<p>
					<input type="button" value="Me quiero registrar" name="registrarse" onclick= "mostrar_registro()">
				</p>
			</form>
		</div>

He intentado de varias formas como por ejemplo, primero consiguiendo el nodo mediante getElementById y despues pasandoselo como parametro al removeChild, sin embargo tampoco resulto, seguro que debe ser algo muy tonto que no estoy viendo. Si alguien tiene alguna info respecto al tema o puede ver el error que estoy cometiendo, se los agradecería.

Muchas gracias por detenerse a leer, saludos!

Lo siento, corrección, la linea correcta es:
var boton = document.getElementById('boton_registrarse');
boton.parentNode.removeChild(boton);