CODEWITHSUNDEEP
javascriptjquery
user2470075
user2470075

Reputation: 169

How to hide a button with Javascript

I have a button as follows:

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

Once I click the button, it adds a row to a #dataList1. Then I want it to be hidden. And I did following in 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>

It adds the row, but after it, it does not hide the button. Where did I do wrong?

Upvotes: 0

Views: 111

Answers (4)

tilda
tilda

Reputation: 672

Add id to input

HTML

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

And hide button after appending in AddRow function.

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

Upvotes: 2

Linga
Linga

Reputation: 10553

Because there is no control with the id AddRow. You have to either give id or use class sector $('.btnA').hide();

<script>
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);
$('.btnA').hide();
</script>

Upvotes: 1

Innovation
Innovation

Reputation: 1534

Three Steps Problems:

1) Add this code inside AddRow() function:

$('#AddRow').hide();

2) Remove This event:

$('#AddRow').on('click', function(){

3) Add id AddRow in 

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

Upvotes: 0

Dhanu Gurung
Dhanu Gurung

Reputation: 8840

You can hide the button in AddRow() function itself:

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);
  $('.btnA').hide();
};

DEMO

Upvotes: 0

Related Questions