JavaScript - 点击项目并从父div中删除它?

时间:2016-04-27 14:38:14

标签: javascript jquery html css

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

这些div位于itemcart下,通过JavaScript添加,点击“item-card”。物品卡从图片标题中获取名称(项目图像)。如果单击了项目卡,则会添加“项目选择”类。如果该项目将被单击删除,那么它还应该从项目卡上的正确项目中删除该项目选择的类别。这样的事情可能吗?

3 个答案:

答案 0 :(得分:0)

在HTML5中,您可以为代码声明自定义属性。 例如,如果您要打印产品,您将执行类似的操作:

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

之后,您可以使用jQuery查询与单个项目进行交互

$(".sincle-product[data-product-id=1]").function();

答案 1 :(得分:0)

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

&#13;
&#13;
$("#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()
});
&#13;
#itemcart span {
  color:red;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用此脚本,然后必须在div中添加名为“removeItem”的类

// 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>