使用纯javascript从Modal窗口(购物车)中移除元素
要从模态窗口（购物车）中移除元素，可以使用以下步骤：
- 获取要删除的元素的父元素。
- 使用
removeChild()方法从父元素中删除要删除的元素。
以下是一个示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车示例</title>
</head>
<body>
<div id="cart" class="modal">
<div class="cart-item">
<span>商品1</span>
<button onclick="removeItem(event)">删除</button>
</div>
<div class="cart-item">
<span>商品2</span>
<button onclick="removeItem(event)">删除</button>
</ +div>
</div>
<script src="main.js"></script>
</body>
</html>JavaScript (main.js):
function removeItem(event) {
// 获取要删除的元素的父元素
const cartItem = event.target.parentElement;
// 获取购物车容器
const cart = document.getElementById('cart');
// 从购物车容器中删除要删除的元素
cart.removeChild(cartItem);
}在这个示例中，当用户点击“删除”按钮时，removeItem()函数会被调用。函数首先获取要删除的元素的父元素（即购物车项），然后获取购物车容器，最后使用removeChild()方法从购物车容器中删除购物车项。
相关·内容
所以我试着只用js把模式窗口的一些简单内容作为购物车，在我把它们添加到购物车后，用"x“删除每一项都有问题，我使用event.target，但在那个阶段它给了我一个错误"null"，它在代码的最后一行。不要太严格，这是我的第一个代码:)所以每次我插入购物车<div>
<h2> Item Pr
浏览 11提问于2020-06-05得票数 0
我试图从Firefox中的DOM中删除一个除法元素(一个模态窗口)。
当我第一次移除Modal窗口时，一切正常。当我第二次打开窗口并试图移除它时，它不起作用。具体来说，我收到一条错误消息，表示找不到Modal窗口的父元素。父元素是document.body，我尝试使用parentNode.removeChild()和parent
浏览 7提问于2013-01-26得票数 0
4回答
我正在使用Bootstrap模式，让用户在将商品添加到购物车之前选择产品选项。我以前在这个场景中使用过它们，没有出现任何问题，但是这个场景并没有像预期的那样关闭。当用户点击“添加到购物车”按钮时，会发生一些事情，我认为问题出在那里。首先，一些脚本检查某些字段是否已正确填写。一旦所有这些都得到验证，用户就可以将商品添加到购物车中，此时会弹出另一个窗口，供用户查看购物车内容，并选择是继续购物车还是从上次停止的地方继续。我希望模式窗
浏览 1提问于2013-10-25得票数 11
2回答
使用的程序、语言和框架：Java IntelIJIdea SpringSecurity Thym叶Html JavaScript我需要这样做，以便如果bool是真的，一个模态窗口弹出的消息，产品已添加到购物车。a> <div class="product_modal_window&q
浏览 5提问于2022-06-14得票数 0
1回答
目前，当您单击Kendo中的链接时，我正在努力显示一个模态窗口。下面是我的代码： field:"filename", width: 60,
template: '<a href='javascriptkendoWindow();})();'><span id="win">#:filename#</span></a&g
浏览 0提问于2017-01-25得票数 1
回答已采纳
2回答
我在一个购物商店工作，在购物车页面上有一个‘从购物车中删除’选项，当他们点击它时，弹出窗口确认他们是否要从购物车中删除它。我的问题是，弹出窗口只会在第一个项目上工作，其他项目只会把你带回页面的顶部。这是我正在使用的代码。删除文本 <a href="#" id="cart_popup
浏览 13提问于2017-06-29得票数 0
回答已采纳
我正在使用MusicStore应用程序。
在老年人中，它是将音乐唱片添加到购物篮中。然后它还允许用户删除它。据我所知，它是通过在Controller中实现的Ajax回发来实现的。令我困惑的是，在同一个页面上声明了一个名为"handleUpdate()“的JavaScript函数的引用。例如，它似乎在从购物篮中移除商品后更新购物篮。我看不到它会从任何地方被调用。
浏览 1提问于2011-03-09得票数 5
回答已采纳
所以我想从我的数据库中删除一个用户，只是为了确认用户的操作，我在modal上显示了一个警告，如果用户在modal上单击delete按钮，就会调用Delete函数。所有的工作都很好，除了一件事，在删除后，我的组件不是重新渲染，为此，我需要使用window.location.reload()，它导致整个页面重新加载，以显示更新的用户列表，但我不希望整个页面重新加载，下面是调用模式并更新使用状态钩子中的值的按钮 <i
data-toggle
浏览 18提问于2021-09-16得票数 2
回答已采纳
2回答
以下是我的HTML的示例片段：如果我打开模式，会有一个打印按钮。当我单击它时，我使用jQuery将.noprint应用于#container，将.print应用于#modal。但是modal的.print被忽略了，无论我应用什么选择器，我都不能让modal内容出现。更糟糕
浏览 0提问于2009-08-08得票数 4
回答已采纳
1回答
在返回确认中添加href
、、、
尝试在返回确认中添加链接 <a onclick="return confirm('Before downloading the App please make sure that you have read
浏览 9提问于2020-08-22得票数 0
它们使用弹出/模态元素，如下所示： <div class="modal__inner js-modal-inner">
然后将js-
浏览 6提问于2022-11-14得票数 0
4回答
我正在尝试使用javascript创建一个简单的模态函数。= $('<div id="modal" class="modal-fade"><button class="close">close x</button><div id="foo" /></div><div id="overlay" class="<e
浏览 3提问于2017-05-11得票数 0
7回答
引导模式弹出不关闭
、、、、
我在使用引导模式弹出时有问题。调用弹出是没有问题的，但试图关闭它会产生奇怪的结果。而不是仅仅隐藏弹出和删除背景，弹出式窗口被隐藏，但另一个背景被添加，使屏幕几乎变成黑色。原始背景不会被移除。下面是我尝试使用的html代码 <div class="modal-headermo
浏览 3提问于2013-08-27得票数 2
回答已采纳
1回答
我需要一些关于JavaScript的帮助，如果我将鼠标移动到某个文本上，它将帮助我在div元素中创建文本描述的悬停。这个描述将跟随鼠标，无论我移动鼠标的位置。从文本中移除鼠标后，文本上的悬停将消失。所有这些都需要在纯JavaScript而不是jQuery的帮助下完成。
浏览 5提问于2014-03-03得票数 0
回答已采纳
1回答
webpage.open('https://www.example.com/', function() { phantom.exit();});
在上面的代码中，现在，在幻影js中，我想在没有弹出窗口的情况下拍摄网页的截图。请帮助我如何通过幻影隐藏这个弹出物。
浏览 0提问于2017-10-27得票数 1
回答已采纳
我像这样向Kendo窗口添加了一个类(试图使它成为通用的) .Name("modal") .Visible(false)我似乎不能用jQuery来引用它。当我尝试这样做的时候
$(".kendo-modal").data("kendoW
浏览 0提问于2018-06-21得票数 1
回答已采纳
在twitter引导程序中创建模式时，有什么方法可以更改背景色吗？完全去除阴影？ backdrop: false
});
浏览 13提问于2012-05-14得票数 60
回答已采纳
我需要能够打开一个推特引导模式窗口使用onClick=""或类似的功能。只需要代码进入onClick=""即可。我正在尝试做一个可点击的div来打开模式。分区代码：模态分割代码：
<div id="GSCCModal" class="modalhide fade" ta
浏览 91提问于2013-11-21得票数 33
回答已采纳
好了，我已经安装了简单的购物车(简单的javascript购物车，与payapl协同工作)我需要一种从购物车中取出物品的方法。请访问：
提前感谢，希望我已经说清楚了！如果你需要更多信息，请告诉我。
浏览 1提问于2013-04-18得票数 1
我写了一个javscript，它创建了一个带有特定信息的弹出窗口。modal.style.zIndex = '100'; modal.style.top = '40%'是一个div元素。duplicate也是一个div元素，它包含特定的复选框等。现在我在check中检查一个查询，并相应地调用这个javas
浏览 3提问于2011-04-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
