Hide button when clicked using jQuery

Question

I am trying to develop a form where user submits:

Item
Quantity

The form also has 2 buttons:

ADD ITEM and REMOVE ITEM

The thing is upon ADD ITEM click, form appends new row(that works yay), but I want ADD ITEM button to go hidden as item gets added below is the html & jQuery code, i tried to get it hidden with. then but no luck lol

please advise

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
 var i = 1;

 $('#add-item').click(function() {  
  i++;  
  $('#table-fields')
  .append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button>ADD</button></td><td><button id="'+i+'">REMOVE</button></td></tr>');
   });
 }
);


</script>
</head>
<body>
<form id="items-to-move">
  <table id="table-fields">
    <tr>
    <td><input/></td>
    <td><input/></td>
    <td><button type="button" id="add-item">ADD</button></td>
    <td><button id="remove-item">REMOVE</button></td>
    </tr>
  </table>
</form>
</body>
</html>

The buttons which you add in javascript as well as your initial `Remove button` need a `type="button"` else it submits the form. That's why if I click any button but the first Add button everything disappears in your code snippet. — Ryan Wilson, Dec 20 '18 at 19:11

Mohamed-Yousef · Answer 1 · 2018-12-20T19:30:08.483

A lot of work needed

1st: id should be unique .. use class instead

2nd: You'll need Event binding on dynamically created elements?

3rd: create a click event for remove button and use .closest('tr') to catch the parent row

$(document).ready(function() {
  var i = 1;
  // add item click
  $(document).on('click','.add-item',function(e) {
    e.preventDefault();
    i++;  
    $('#table-fields')
    .append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button type="button" class="add-item">ADD</button></td><td><button type="button" class="remove-item">REMOVE</button></td></tr>');
  });

  // remove item click
  $(document).on('click','.remove-item',function(e) {
    e.preventDefault();
    $(this).closest('tr').remove();
  });
});

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="items-to-move">
  <table id="table-fields">
    <tr>
    <td><input/></td>
    <td><input/></td>
    <td><button type="button" class="add-item">ADD</button></td>
    <td><button type="button" class="remove-item">REMOVE</button></td>
    </tr>
  </table>
</form>
</body>
</html>

Note: This code just how to start .. but you still need some check's something like -if just one row then don't remove it- how many rows after add item or remove item -

No need to use e.preventDefault(); while you use type="button" I used it here to double check

You're totally welcome @ShamilMubarakshin .. But as I said its just a start .. Have a great day :-) — Mohamed-Yousef, Dec 20 '18 at 20:16

score 1 · Answer 2 · answered Dec 20 '18 at 19:17

1

To hide the button when it is clicked use

$(this).hide();

e.g.

$('#add-item').click(function() {   
    $(this).hide();
    i++;        
    $('#table-fields')
    .append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button>ADD</button></td><td><button id="'+i+'">REMOVE</button></td></tr>');
  });
}

inside your click function. But as pointed out by Ryan, you have a bigger problem when clicking add the second time.

answered Dec 20 '18 at 19:17

Steve

1,903
5
22
30

right, thank you! I'd use above suggestions and tweak that with some more functionality – Shamil Mubarakshin Dec 20 '18 at 20:07

Kurohige · Answer 3 · 2018-12-20T19:54:38.267

when you add elements dinamically you should use something like this:

 $(document).on("click", "selector", function(){});

to make it works.

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
 var i = 1;

 $(document).on('click','.add-item',function() {  
  i++;  
        $(this).remove();
  $('#table-fields')
  .append('<tr id="row'+i+'"><td><input type="text"/></td><td><input/></td><td><button type="button" class="add-item">ADD</button></td><td><button  type="button" class="remove">REMOVE</button></td></tr>');
   });
 }
);
 $(document).on('click','.remove',function(e) {
  
$(this).parent().parent().remove();
  });

</script>
</head>
<body>
<form id="items-to-move">
  <table id="table-fields">
    <tr>
    <td><input/></td>
    <td><input/></td>
    <td><button type="button" class="add-item">ADD</button></td>
    <td><button type="button" class="remove">REMOVE</button></td>
    </tr>
  </table>
</form>
</body>
</html>

Hide button when clicked using jQuery

3 Answers3