javascript - 如何通过单击按钮隐藏具有动态生成 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作为参数。如何实现这一目标？

我尝试了以下方法

<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

例如:

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

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