Как скрыть форму динамически генерируемым 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 должна принимать идентификатор в качестве параметра. Как достичь этого?

Я попытался следующие

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

С hideForm определено ниже

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

Answer 1

Вы не очень нужны ID, если у вас есть ссылка на форму elemnt

, например:

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

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

Answer 2

Вы можете использовать конкатенацию в селекторе JQuery:

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/