使用jQuery添加项并从购物车中移除项。我无法删除仅使用jQuery添加的项。script.js文件中的方法-1
使用jQuery添加项并从购物车中移除项。我无法删除仅使用jQuery添加的项。script.js文件中的方法-1
提问于 2020-06-19 08:05:56
嗨，我正在做一个简单的购物车，我可以在其中添加或删除项目使用jQuery。使用脚本代码中的method-2，我能够做到这一点，但在使用method-1时，我只能删除默认HTML中添加的列表项。但对于使用jQuery添加的列表项，同样不起作用。
请告诉我为什么method -1不适用于使用jQuery添加的元素。
还请说明两种方法在这种情况下和一般情况下是如何不同的。
希望你能明白我的疑虑，
谢谢你的回应和努力。
$(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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-19 08:17:22
您只需要针对文档而不是类。
改变这一点：
$("ul .item-button").click ( function(){
$(this).parent().remove();
});这方面：
$(document).on('click',"ul .item-button",function(){
$(this).parent().remove();
});因为新项是在代码执行后创建的，所以它们将不具有附加的函数。
但通过这种方式，我假设函数正在侦听文档，并从参数"ul ..item按钮“中找到目标，并为其执行。
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62465942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号