CODEWITHSUNDEEP
jquery
Shamil Mubarakshin
Shamil Mubarakshin

Reputation: 11

Hide button when clicked using jQuery

I am trying to develop a form where user submits:

  1. Item
  2. 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>

Upvotes: 0

Views: 287

Answers (3)

Kurohige
Kurohige

Reputation: 1418

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>

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 2

Steve
Steve

Reputation: 1943

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.

Upvotes: 1

Related Questions