gpt4 book ai didi

JavaScript - 单击元素并将其从父 div 中删除?

转载 作者:行者123 更新时间:2023-11-28 06:05:35 24 4
gpt4 key购买 nike

所以,我有一个父 div 和子 div。 JavaScript 创建子 div,ID 和里面的文本是不同的..所以我接下来尝试做。每个元素后面都会有一个X,如果您单击它将删除该元素,可以这样做吗?我尝试使用 JavaScript 进行一些操作,但我不明白如何执行该部分,如果您单击该元素,则会将其删除。此外,它还必须删除一个包含相同元素名称的类。我将在下面放置一些代码。

HTML 示例:

<div id="itemcart" style="float: left;height: 184px;width: 330px;left: 245px;">
<div id="★_Butterfly_Knife__Crimson_Web_Field-Tested">★ Butterfly Knife | Crimson Web (Field-Tested)</div>
<div id="AWP__Asiimov_Battle-Scarred">AWP | Asiimov (Battle-Scarred)</div>
<div id="AK-47__Wasteland_Rebel_Field-Tested">AK-47 | Wasteland Rebel (Field-Tested)</div>
<div id="M4A1-S__Cyrex_Field-Tested">M4A1-S | Cyrex (Field-Tested)</div>
<div id="AWP__Corticera_Minimal_Wear">AWP | Corticera (Minimal Wear)</div>
<div id="StatTrak™_USP-S__Torque_Field-Tested">StatTrak™ USP-S | Torque (Field-Tested)</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Souvenir_Nova__Walnut_Field-Tested">Souvenir Nova | Walnut (Field-Tested)</div>
<div id="Galil_AR__Kami_Factory_New">Galil AR | Kami (Factory New)</div>
<div id="Tec-9__Red_Quartz_Field-Tested">Tec-9 | Red Quartz (Field-Tested)</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
</div>

itemcart 下的那些 div 是通过 JavaScript 通过单击“item-card”添加的。元素卡从图片标题(元素的图像)中获取名称。如果单击元素卡,则会添加“元素选择”类。如果通过单击该元素来删除该元素,那么它还应该从元素卡上的右侧元素中删除该元素选择的类别。这样的事情可以做吗?

最佳答案

您可以使用 .append().parent().remove()

$("#itemcart div").each(function() {
// append `span` having text `"X"` to each `div` in `#itemcart`
$(this).append("<span> X</span>");
});

$("#itemcart span").click(function() {
// remove clicked `span` parent element
$(this).parent().remove()
});
#itemcart span {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="itemcart" style="float: left;height: 184px;width: 330px;left: 245px;">
<div id="★_Butterfly_Knife__Crimson_Web_Field-Tested">★ Butterfly Knife | Crimson Web (Field-Tested)</div>
<div id="AWP__Asiimov_Battle-Scarred">AWP | Asiimov (Battle-Scarred)</div>
<div id="AK-47__Wasteland_Rebel_Field-Tested">AK-47 | Wasteland Rebel (Field-Tested)</div>
<div id="M4A1-S__Cyrex_Field-Tested">M4A1-S | Cyrex (Field-Tested)</div>
<div id="AWP__Corticera_Minimal_Wear">AWP | Corticera (Minimal Wear)</div>
<div id="StatTrak™_USP-S__Torque_Field-Tested">StatTrak™ USP-S | Torque (Field-Tested)</div>
<div id="Chroma_2_Case">Chroma 2 Case</div>
</div>

关于JavaScript - 单击元素并将其从父 div 中删除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36893065/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com