How to hide a button with Javascript

Question

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?

I've removed the <JAVASCRIPT> from the beginning of your title. Don't put tags in the title. (Do you see anyone else putting tags in the title?) — T.J. Crowder
– T.J. Crowder, Commented Jan 13, 2014 at 9:39
I'm curious why $('#AddRow').on('click', function(){ $('#AddRow').hide(); }); is not working?? — Sachin Verma
– Sachin Verma, Commented Jan 13, 2014 at 9:41
Also, if you're using jQuery (and you clearly are), include the jquery tag on the question. — T.J. Crowder
– T.J. Crowder, Commented Jan 13, 2014 at 9:42

tilda · Accepted Answer · 2014-01-13 09:49:16Z

2

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

edited Jan 13, 2014 at 9:49

answered Jan 13, 2014 at 9:41

tilda

6725 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dhanu Gurung Over a year ago

You are also adding the $('#AddRow').hide() inside AddRow() function. In that case, you don't need to add 'id' explicitly when you can refer button using its class.

tilda Over a year ago

Yes, "And hide button after appending in AddRow function.". I've edited my fiddle to be more clear.

Dhanu Gurung Over a year ago

My question is why you need to give id when that button can be referred by its class?

Linga · Accepted Answer · 2014-01-13 09:46:28Z

1

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>

edited Jan 13, 2014 at 9:46

answered Jan 13, 2014 at 9:40

Linga

10.6k10 gold badges57 silver badges109 bronze badges

Comments

Dhanu Gurung · Accepted Answer · 2014-01-13 09:44:38Z

0

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

answered Jan 13, 2014 at 9:44

Dhanu Gurung

8,91411 gold badges49 silver badges61 bronze badges

Comments

Innovation · Accepted Answer · 2014-01-13 09:45:28Z

0

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>

answered Jan 13, 2014 at 9:45

Innovation

1,53417 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to hide a button with Javascript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related