javascript - 如何使用 Javascript 隐藏按钮

Question

我有一个按钮，如下所示:

<a href="#" onclick="AddRow();return false;" class="btnA">ADD</a>

单击按钮后，它会向 #dataList1 添加一行。然后我想把它隐藏起来。我用 Javascript 做了以下操作；

<script type="text/javascript">

function AddRow(){
var tr = '<tr>';
tr += '<td></td>';
tr += '<td><span class="br"><input type="text" id="grpNm" name="grpNm" value="" style="width:96%"/></span></td>';
tr += '<td><span class="br"><input type="text" id="grpExp" name="grpExp" value="" style="width:96%"/></span></td>';
tr += '</tr>';
    $('#dataList1').append(tr);
};

$('#AddRow').on('click', function(){
$('#AddRow').hide();
}); 
</script>

它添加了行，但在其之后，它不隐藏按钮。我哪里做错了？

Answer 1

将 ID 添加到输入

HTML

    <a href="#" onclick="AddRow();return false;" class="btnA" id="AddRow">ADD</a>
    <div id="dataList1"></div>

并在 AddRow 函数中追加后隐藏按钮。

JS

function AddRow(){
var tr = '<tr>';
tr += '<td></td>';
tr += '<td><span class="br"><input type="text" id="grpNm" name="grpNm" value="" style="width:96%"/></span></td>';
tr += '<td><span class="br"><input type="text" id="grpExp" name="grpExp" value="" style="width:96%"/></span></td>';
tr += '</tr>';
    $('#dataList1').append(tr);

    $("#AddRow").hide();
}

fiddle