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
– Ryan Wilson, Commented Dec 20, 2018 at 19:11

Mohamed-Yousef · Accepted Answer · 2018-12-20 19:30:08Z

2

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

edited Dec 20, 2018 at 19:30

answered Dec 20, 2018 at 19:18

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

2 Comments

Shamil Mubarakshin Over a year ago

Thanks Mohammed for supplementing remove item thing!

Mohamed-Yousef Over a year ago

You're totally welcome @ShamilMubarakshin .. But as I said its just a start .. Have a great day :-)

Steve · Accepted Answer · 2018-12-20 19:17:06Z

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, 2018 at 19:17

Steve

1,9535 gold badges23 silver badges33 bronze badges

1 Comment

Shamil Mubarakshin Over a year ago

right, thank you! I'd use above suggestions and tweak that with some more functionality

Kurohige · Accepted Answer · 2018-12-20 19:54:38Z

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>

Collectives™ on Stack Overflow

Hide button when clicked using jQuery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related