CODEWITHSUNDEEP
jquery
Holash Chand
Holash Chand

Reputation: 23

Add items and remove items from cart using jQuery. I am not able to remove items added using jQuery only. Method-1 in script.js file

Hi, I am making a simple cart in which I can add or remove item using jQuery. Using method-2 in the script code i am able to do this but on using method-1 i am able to remove only list items which are added in default HTML. but same not working for list items added using jQuery.

Please tell me why method - 1 is not working for elements added using jQuery.
Please also describe how both methods are different in this condition and in general.

Hope my doubt is clear to you,
Thanks and Regards for your responses and efforts 

$(document).ready(function(){
	// counter to recognize new item in the list
	var itemId = 1;

	// add items to the list
   $("form").submit ( function (event){
   		var txt = document.createElement("li");
   		var btn = document.createElement("button");
   		txt.id = 'item-' + itemId;
  		btn.id = 'delete-'+ itemId;
  		btn.className = 'item-button bg-light';
  		txt.className = 'm-1';
  		txt.innerHTML = $("input").val() + ' '; 
  		btn.innerHTML = '❌';
  		$(txt).append(btn);
  		$("ul").append(txt); 
  		$("input").val('');
  		itemId ++;
  		event.preventDefault();
  	});


   // method-1 to remove the items from the list // *Not working for only elements added using jQuery
   $("ul .item-button").click ( function(){
   		$(this).parent().remove();
   });

   // method-2 to remove the items from the list
   //$('ul').on('click', '.item-button', function() {
   //		$(this).parent().remove();
	 //});

});
<!DOCTYPE html>
<html>
<head>
	<title>My Shopping Cart</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
	<script src="https://kit.fontawesome.com/5048f8c666.js" crossorigin="anonymous"></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div class="container mt-3">
		<div>
			<form id="form1">
				<input type="text" id="inputItem" placeholder="Enter the Product" required>
				<button type="submit" id="btn1">add</button>
			</form>
		</div>
		<div>
			<h4>Items Available in the cart</h4>
			<ul id="Items">
				<li id="item-00">list item <button id="delete-00" class="item-button">&#10060;</button></li>
				<li id="item-0">list item <button id="delete-0" class="item-button">&#10060;</button></li>
			</ul>
		</div>
	</div>
</body>
</html>

Upvotes: 2

Views: 1177

Answers (1)

Jovylle
Jovylle

Reputation: 971

you just need to target document instead of the class.

Change this:

 $("ul .item-button").click ( function(){
        $(this).parent().remove();
   });

Into this:

   $(document).on('click',"ul .item-button",function(){
        $(this).parent().remove();
   });

Because the new items are created after your code executed, so they will not have the function attached to them.

But this way, i assume that the function is listening to the document and find the target from parameter which is "ul .item-button" and execute for it.

$(document).ready(function(){
	// counter to recognize new item in the list
	var itemId = 1;

	// add items to the list
   $("form").submit ( function (event){
   		var txt = document.createElement("li");
   		var btn = document.createElement("button");
   		txt.id = 'item-' + itemId;
  		btn.id = 'delete-'+ itemId;
  		btn.className = 'item-button bg-light';
  		txt.className = 'm-1';
  		txt.innerHTML = $("input").val() + ' '; 
  		btn.innerHTML = '&#10060;';
  		$(txt).append(btn);
  		$("ul").append(txt); 
  		$("input").val('');
  		itemId ++;
  		event.preventDefault();
  	});


   $(document).on('click',"ul .item-button", function(){
   		$(this).parent().remove();
   });

});
<!DOCTYPE html>
<html>
<head>
	<title>My Shopping Cart</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
	<script src="https://kit.fontawesome.com/5048f8c666.js" crossorigin="anonymous"></script></script>
</head>
<body>
	<div class="container mt-3">
		<div>
			<form id="form1">
				<input type="text" id="inputItem" placeholder="Enter the Product" required>
				<button type="submit" id="btn1">add</button>
			</form>
		</div>
		<div>
			<h4>Items Available in the cart</h4>
			<ul id="Items">
				<li id="item-00">list item <button id="delete-00" class="item-button">&#10060;</button></li>
				<li id="item-0">list item <button id="delete-0" class="item-button">&#10060;</button></li>
			</ul>
		</div>
	</div>
</body>
</html>

Upvotes: 2

Related Questions