ボタンをクリックすることで、動的に生成されたIDを持つフォームを非表示にする方法

Question

と仮定私は、動的に生成されたIDを持ついくつかのフォームを持っている私は、フォームのボタンをクリックしたときになるように、各フォームに関連付けられたボタンを作成したい

<form id = "1"> 
    employer: <input type = "text" /> 
</form> 

<form id = "2"> 
    employer: <input type = "text" /> 
</form> 

<form id = "3"> 
    employer: <input type = "text" /> 
</form> 

隠されます。したがって、onclick関数はidをパラメータとして取る必要があります。これを達成する方法は？

私はあなたがjQueryのセレクタで文字列の連結を使用することができます

<script> 
function hideForm(id){ 
    $("#id").hide(); 
} 
</script> 

Answer 1

あなたが本当に必要としませんフォームへの参照がある場合はID

例えば

：

$('form').each(function(i){ 
    var $form = $(this), 
     $button = $('<button>',{text:'Hide form # '+(i+1)}).click(function(){ 
      $form.hide() 
     }); 

    $('body').append($button); 
}) 

Answer 2

以下に定義hideFormでは、次の

<script type="text/javascript"> 
var inputElement = document.createElement('button'); 
inputElement.addEventListener('click', function(){ 
    hideForm(1); 
}); 
document.body.appendChild(inputElement); 
</script> 

を試してみました：

function hideForm(id){ 
    $("#"+id).hide(); 
} 

Answer 3

私が思うに、これはあなたが探しているものです。

HTML：

<form id="1"> 
    employer: 
    <input type="text" /> 
    <button>Hide</button> 
</form> 

<form id="2"> 
    employer: 
    <input type="text" /> 
    <button class="hide-button">Hide</button> 
</form> 

<form id="3"> 
    employer: 
    <input type="text" /> 
    <button>Hide</button> 
</form> 

はJavaScript：

$('form').on('submit', function(e) { 
    e.preventDefault(); 
    $(this).hide(); 
}); 

JSFiddle：

https://jsfiddle.net/nikdtu/pp6j8zvx/