Question posted in 
When I place the #myCart table inside the body the items are added to the cart and the remove button works as well
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Boutique</title>
<link rel="icon" href="./img/favicon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/layout.css">
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Laila" rel="stylesheet">
</head>
<body>
<div class="logoRow">
<div>
<img style="width: 80px" src="./img/logo.png">
</div>
<div class="topSideBar">
<div>
<ul>
<li>Cart</li>
<li id="cart_container">
<div id="cart_counter">0</div>
<div id="cart_button" class="image"></div>
<div id="cart_items">
<h3>Cart</h3>
<div id="cart-container" style="height:300px;">
</div>
</div>
</li>
<li><a href="#">Womens</a></li>
<li><a href="#">Mens</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Girls</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<div class="container">
<p class="item">Soccer Ball</p>
<p class="price">30</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Shoes</p>
<p class="price">80</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Jersey</p>
<p class="price">130</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
</div>
<table id="myCart" border="1">
<tr>
<th>Item Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th>Remove</th>
</tr>
<tr style="display: none; border-top: 2px solid black;">
<td colspan="3">Subtotal</td>
<td class="right subtotal"></td>
</tr>
</table>
<div class="bottomNav">
<div class="bottomNavContents">
<div>
<a href="/">Home</a>
<a href="/about-kfc.php">About KFC</a>
<a href="/contact-us.php">Contact Us</a>
<a href="#">Feedback</a>
</div>
<div class="socialMediaIcons">
<a href="#"><img style="width: 30px; height: 30px;" src="./img/fb-icon.jpg" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/instagram-icon.png" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/twitter-icon.png" alt=""></a>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#cart_counter').animate({ top: '-2px', opacity: 1 }, 500);
$('#cart_button').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#cart_items').fadeToggle('fast', 'linear');
return false;
});
// HIDE cart_items WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#cart_items').hide();
});
$('#cart_items').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$('.add').click(function() {
var itemsNo = parseInt($('.itemsNo').text());
itemsNo = itemsNo + 1;
$('.itemsNo').text(itemsNo);
$('#myCart tr:last').show();
var item = $(this).siblings('.item').text();
var price = $(this).siblings('.price').text();
var qty = $(this).siblings('.qty').val();
var total = price * qty;
// to check if item exists in table
if($("td:contains('" + item + "')").length > 0) {
var lastQty = $("td:contains('" + item + "')").next().text();
var accumQty = parseInt(lastQty) + parseInt(qty);
$("td:contains('" + item + "')").siblings('.qty2').text(accumQty);
total = price * accumQty;
$("td:contains('" + item + "')").siblings('.total').text(total);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum += val;
});
$(".subtotal").text(sum);
} else {
$("#myCart tr:last").before(
"<tr>" +
"<td class='item_name'>" + item + "</td>" +
"<td class='qty2'>" + qty + "</td>" +
"<td class='right price2'><span class='currency'>$ </span>" + price + "</td>" +
"<td class='right total'>" + total + "</td>" +
"<td><button class='remItem' onclick='remove()'>X</button></td>" +
"</td>"
);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum += val;
});
$(".subtotal").text(sum);
}
$(this).siblings('.qty').val(1);
});
$(document).on("click", "button.remItem" , function() {
var totalPrice = parseInt($('.subtotal').text()) - parseInt($(this).parent().siblings('.total').text());
$(".subtotal").text(totalPrice);
$(this).parent().parent().remove();
});
});
</script>
</html>
But when the #myCart table is placed in the #cart-container, the remove button doesn’t work. But all add to cart works. What causes this behavior?
https://jsfiddle.net/Ldnjf0by/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Boutique</title>
<link rel="icon" href="./img/favicon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/layout.css">
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Laila" rel="stylesheet">
</head>
<body>
<div class="logoRow">
<div>
<img style="width: 80px" src="./img/logo.png">
</div>
<div class="topSideBar">
<div>
<ul>
<li>Cart</li>
<li id="cart_container">
<div id="cart_counter">0</div>
<div id="cart_button" class="image"></div>
<div id="cart_items">
<h3>Cart</h3>
<div id="cart-container" style="height:300px;">
<table id="myCart" border="1">
<tr>
<th>Item Name</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
<th>Remove</th>
</tr>
<tr style="display: none; border-top: 2px solid black;">
<td colspan="3">Subtotal</td>
<td class="right subtotal"></td>
</tr>
</table>
</div>
</div>
</li>
<li><a href="#">Womens</a></li>
<li><a href="#">Mens</a></li>
<li><a href="#">Boys</a></li>
<li><a href="#">Girls</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Register</a></li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<div class="container">
<p class="item">Soccer Ball</p>
<p class="price">30</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Shoes</p>
<p class="price">80</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
<div class="container">
<p class="item">Soccer Jersey</p>
<p class="price">130</p>
Qty <input type="number" class="qty" value="1" min="1">
<button class="add">Add to cart</button>
</div>
</div>
<div class="bottomNav">
<div class="bottomNavContents">
<div>
<a href="/">Home</a>
<a href="/about-kfc.php">About KFC</a>
<a href="/contact-us.php">Contact Us</a>
<a href="#">Feedback</a>
</div>
<div class="socialMediaIcons">
<a href="#"><img style="width: 30px; height: 30px;" src="./img/fb-icon.jpg" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/instagram-icon.png" alt=""></a>
<a href="#"><img style="width: 30px; height: 30px;" src="./img/twitter-icon.png" alt=""></a>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
// ANIMATEDLY DISPLAY THE NOTIFICATION COUNTER.
$('#cart_counter').animate({ top: '-2px', opacity: 1 }, 500);
$('#cart_button').click(function () {
// TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
$('#cart_items').fadeToggle('fast', 'linear');
return false;
});
// HIDE cart_items WHEN CLICKED ANYWHERE ON THE PAGE.
$(document).click(function () {
$('#cart_items').hide();
});
$('#cart_items').click(function () {
return false; // DO NOTHING WHEN CONTAINER IS CLICKED.
});
$('.add').click(function() {
var itemsNo = parseInt($('.itemsNo').text());
itemsNo = itemsNo + 1;
$('.itemsNo').text(itemsNo);
$('#myCart tr:last').show();
var item = $(this).siblings('.item').text();
var price = $(this).siblings('.price').text();
var qty = $(this).siblings('.qty').val();
var total = price * qty;
// to check if item exists in table
if($("td:contains('" + item + "')").length > 0) {
var lastQty = $("td:contains('" + item + "')").next().text();
var accumQty = parseInt(lastQty) + parseInt(qty);
$("td:contains('" + item + "')").siblings('.qty2').text(accumQty);
total = price * accumQty;
$("td:contains('" + item + "')").siblings('.total').text(total);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum += val;
});
$(".subtotal").text(sum);
} else {
$("#myCart tr:last").before(
"<tr>" +
"<td class='item_name'>" + item + "</td>" +
"<td class='qty2'>" + qty + "</td>" +
"<td class='right price2'><span class='currency'>$ </span>" + price + "</td>" +
"<td class='right total'>" + total + "</td>" +
"<td><button class='remItem' onclick='remove()'>X</button></td>" +
"</td>"
);
var sum = 0;
$(".total").each(function() {
var val = parseInt($(this).text());
sum += val;
});
$(".subtotal").text(sum);
}
$(this).siblings('.qty').val(1);
});
$(document).on("click", "button.remItem" , function() {
var totalPrice = parseInt($('.subtotal').text()) - parseInt($(this).parent().siblings('.total').text());
$(".subtotal").text(totalPrice);
$(this).parent().parent().remove();
});
});
</script>
</html>
2
Answers
remove the onClick from this line, as it is already being implemented in code
Also since the td are dynamically added, the event bubbling is not happening properly. Modified the click target to bubble down the event
Fixed check this https://jsfiddle.net/ujf3e42r/
The problem in
This code will
return falsewhen the#cart_itemsclicked before delete button event and this will stop the delete event from trigger .. [1] remove thereturn false[2] Also instead of
$(this).parent().parent().remove();use$(this).closest('tr').remove()Note: With
.removeyou’ll need a bit of work to check if there’s just one item in the list to remove the total row as wellSee the fiddle