Javascript-форум - Удалить и создать элемент по клику

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Удалить и создать элемент по клику (https://javascript.ru/forum/events/34076-udalit-i-sozdat-ehlement-po-kliku.html)

Удалить и создать элемент по клику

Только недавно начал изучать JavaScript, столкнулся с проблемой.
Есть страница. Пароль изначально задается в поле type="text", по клику на ссылку "скрыть" поле становится password, с возможностью вернуть все, как было. Как я понял из чтения форумов, в IE с этим проблемы. И было решено создавать/удалять инпуты.
Проблема в том, что по первому клику все происходит как надо, а вот при повторном клике не происходит ничего. Где я ошибся?

<script>
$('#hide').click(function() {
	$('.on').append('<input type="password" value="" id="pass" class="password"><span class="grey_str"></span><a href="#" class="hide" id="show">Показать</a>');
	$("#txt").keyup(function () {
      var value = $(this).val();
      $("#pass").val(value);
    }).keyup();
	$('#txt, #hide, #grey_1').remove();
});
$('#show').click(function() {
	$('.on').append('<input type="text" value="" id="txt" class="password"><span class="grey_str" id="grey_1"></span><a href="#" class="hide" id="hide">Скрыть</a>');
	$("#pass").keyup(function () {
      var value = $(this).val();
      $("#txt").val(value);
    }).keyup();
	$('#pass, #show, #grey_2').remove();
});
</script>

Помогите, пожалуйста.

Arne, вот пример

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
<input type="password" id="password-hide">
<input type="text" id="password">
<input type="button" id="show-hide" value="show/hide">    
    <script>

      
      
      
var bt = document.getElementById("show-hide");
var inp_hide = document.getElementById("password-hide");
var inp = document.getElementById("password");

   function show_hide(param) {
    
     var show_state = param.show;
     
     cl();
     
     param.bt.onclick = cl;
     
     function cl (){
      
       if(show_state) show();
         
       
       else hide();
     
     }
     
    function show() {
     
     param.inp_hide.style.display = "none";
      
     param.inp.value = param.inp_hide.value;
      
      param.inp.style.display = "";
      
       show_state = false;
    }   
    
    function hide() {
     
     param.inp_hide.style.display = "";
      
     param.inp_hide.value = param.inp.value ;
      
     param.inp.style.display = "none";
      
       show_state = true;
    }  
    
    }
      show_hide({
        show: false,
        inp_hide: inp_hide,
        inp:inp,
        bt:bt
      
      });

    </script>

  </body>
</html>

cyber,
с display:none/block я сам разобрался, но программист от меня требует именно удалять-добавлять блоки. Ему один инпут нужен, а не два на выходе. А вот тут и вышла засада :(

Цитата:

Сообщение от Arne

требует именно удалять-добавлять блоки.

это очень тупо, ну ладно

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
<div id="container">

  
    </div>
    
    <input type="button" id="show-hide" value="show/hide">    
    <script>

      
      
      
var bt = document.getElementById("show-hide");
var cont = document.getElementById("container");

   function show_hide(param) {
    
     var show_state = param.show, current;
     
     append();
     
     param.bt.onclick = append;
    
     
       function append(){
         // тут можно задать нужные парметры инпуту
     
       var inp = document.createElement("input");
       
       if(show_state) inp.type = "text";
       else inp.type = "password";
       
       if(current) {
         inp.value = current.value;
         container.removeChild(current);
       }
       
       param.container.appendChild(inp);
       
       current = inp;
       
       show_state = !show_state;
     }
     
     
    
    
    };
      show_hide({
        show: false,
        container:cont,
        bt:bt
      
      });

    </script>

  </body>
</html>

cyber,
у программиста проблема с передачей данных из поля на сервер.
Помогло. Спасибо большое)

Цитата:

Сообщение от Arne

у программиста проблема с передачей данных из поля на сервер.

я так и понял, но это можно решить и по другому не удаляю.