Reputation: 23
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">❌</button></li>
<li id="item-0">list item <button id="delete-0" class="item-button">❌</button></li>
</ul>
</div>
</div>
</body>
</html>
Upvotes: 2
Views: 1177
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 = '❌';
$(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">❌</button></li>
<li id="item-0">list item <button id="delete-0" class="item-button">❌</button></li>
</ul>
</div>
</div>
</body>
</html>
Upvotes: 2