JavaScript - 單擊項目並從父div中刪除它？

Question

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

通過點擊“item-card”，JavaScript中添加了在itemcart下的div。 物品卡從圖片標題中獲取名稱（項目圖像）。 如果單擊了項目卡，則會添加“項目選擇”類。 如果該項目將被單擊刪除，那么它還應該從項目卡上的正確項目中刪除該項目選擇的類別。 這樣的事情可能嗎？

Answer 1

在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();

Answer 2

你可以使用.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> 

Answer 3

您可以使用此腳本，然后必須向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>