JavaScript-单击项并将其从父div中删除？

所以，我有一个父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>

★ 蝴蝶刀|深红色网（现场测试）
AWP | Asimov（战痕累累）
AK-47 |荒地叛军（现场测试）
M4A1-S | Cyrex（现场测试）
AWP | Corticera（最小磨损）
斯塔特拉克™ USP-S |扭矩（现场测试）
色度2例
色度2例
色度2例
诺瓦核桃纪念品（现场测试）
Galil AR|Kami（新工厂）
Tec-9红色石英（现场测试）
色度2例
色度2例
色度2例
色度2例
色度2例
色度2例

---

那些位于itemcart下的div是通过JavaScript通过单击“item card”添加的。物品卡片从图片标题（物品图片）中获取物品名称。如果单击了项目卡，则会添加类“item selected”。如果通过单击该项目将其删除，则还应将该项目从项目卡的右侧项目中删除。可以这样做吗？

在HTML5中，您可以为标记声明自定义属性。 例如，如果您正在打印产品，您将执行类似的操作：

<?php
    foreach($products as $p) {
        echo '<div class="single-product" data-product-id="' . $p->id. '" data-product-price="' . $p->price . '">' . $product->name . '</div>';
    }
?>

---

在HTML5中，您可以为标记声明自定义属性。 例如，如果您正在打印产品，您将执行类似的操作：

<?php
    foreach($products as $p) {
        echo '<div class="single-product" data-product-id="' . $p->id. '" data-product-price="' . $p->price . '">' . $product->name . '</div>';
    }
?>

您可以使用

.append（）

，

.parent（）

，

.remove（）

$（“#itemcart div”）。每个（函数（）{
//在`#itemcart中的每个` div`后面追加具有文本`“X``的`span``
$（此）。附加（“X”）；
});
$（“#itemcart span”）。单击（函数（）{
//删除单击的“span”父元素
$（this.parent（）.remove（））
});
#itemcart span{
颜色：红色；
}

★ 蝴蝶刀|深红色网（现场测试）
AWP | Asimov（战痕累累）
AK-47 |荒地叛军（现场测试）
M4A1-S | Cyrex（现场测试）
AWP | Corticera（最小磨损）
斯塔特拉克™ USP-S |扭矩（现场测试）
色度2例
您可以使用
.append（）
，
.parent（）
，
.remove（）


$（“#itemcart div”）。每个（函数（）{
//在`#itemcart中的每个` div`后面追加具有文本`“X``的`span``
$（此）。附加（“X”）；
});
$（“#itemcart span”）。单击（函数（）{
//删除单击的“span”父元素
$（this.parent（）.remove（））
});
#itemcart span{
颜色：红色；
}

★ 蝴蝶刀|深红色网（现场测试）
AWP | Asimov（战痕累累）
AK-47 |荒地叛军（现场测试）
M4A1-S | Cyrex（现场测试）
AWP | Corticera（最小磨损）
斯塔特拉克™ USP-S |扭矩（现场测试）
色度2例
您可以使用此脚本，然后必须将名为“removeItem”的类添加到div中

//Jquery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
    window.onload = function() {
        $( ".removeItem" ).click(function() {
            this.remove();
        });
    }
</script>


window.onload=函数（）{
$（“.removietem”）。单击（函数（）{
这个。删除（）；
});
}
您可以使用此脚本，然后必须将名为“removeItem”的类添加到div中

//Jquery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
    window.onload = function() {
        $( ".removeItem" ).click(function() {
            this.remove();
        });
    }
</script>


window.onload=函数（）{
$（“.removietem”）。单击（函数（）{
这个。删除（）；
});
}
您可以使用
.remove（）
。注意，在
html
中有重复的
id
s是的，那么它应该只使用：last，如果它是重复的。另外，我如何使用.remove（）从那里删除该项？在
document
中不应该有重复的
id
s，但我不喜欢这样。我得到的结果是，如果您重新单击商品，它将从购物车中删除该商品，但如果您可以单击“X”，您可以使用
.remove（）
，这会更好。注意，在
html
中有重复的
id
s是的，那么它应该只使用：last，如果它是重复的。另外，我如何使用.remove（）从那里删除该项？在
document
中不应该有重复的
id
s，但我不喜欢这样。我想，如果你重新点击物品，它会从购物车中移除物品，但如果你能点击“X”会更好哇，这真的很简单：O？是否可以在项目名称后面添加X？：）嘿，如果我尝试附加不想为我删除其他文本“嘿，如果我尝试附加不想为我删除其他文本”？如果我可以问的话，试试萨尔索。是否可以将“每个”更改为不同的内容？问题是，如果我从“市场”中选择商品，那么对于每种商品，它都会为已经拥有它的人添加X。是的，可以更改
。each（）
。选择项目时，将
span
附加到相应的
div
Wow，这非常简单：O？是否可以在项目名称后面添加X？：）嘿，如果我尝试附加不想为我删除其他文本“嘿，如果我尝试附加不想为我删除其他文本”？如果我可以问的话，试试萨尔索。是否可以将“每个”更改为不同的内容？问题是，如果我从“市场”中选择商品，那么对于每种商品，它都会为已经拥有它的人添加X。是的，可以更改
。each（）
。选择项目时，将
span
追加到相应的
div