JavaScript - Klicken Sie auf ein Element und löschen Sie es aus dem übergeordneten div?

Question

Also, ich habe ein Elternteil Div und Child divs. JavaScript erstellt untergeordnete divs, ID & der Text im Inneren ist anders .. Also versuche ich als nächstes zu tun. Es wird X hinter jedem Gegenstand sein und wenn du darauf klickst wird der Gegenstand entfernt, ist das möglich? Ich habe etwas mit JavaScript versucht, aber ich habe nicht verstanden, wie man diesen Teil macht, wenn man auf dieses Element klickt und es entfernt. Außerdem muss eine Klasse entfernt werden, die den gleichen Objektnamen enthält. Ich werde etwas Code unten setzen.

HTML Beispiel:

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

Diese divs, die unter dem itemcart sind, werden durch JavaScript hinzugefügt, durch "Artikel-Card" klicken. Die Namen der Item-Karte werden aus dem Bildtitel (Bild des Gegenstands) benannt. Wenn die Gegenstandskarte angeklickt wird, fügt sie die Klasse "Gegenstand ausgewählt" hinzu. Wenn der Gegenstand durch Anklicken gelöscht wird, sollte er auch die ausgewählte Gegenstandsklasse aus dem richtigen Gegenstand auf der Gegenstandskarte entfernen. Ist so etwas möglich?

Answer 1

Sie können .append(), .parent(), .remove() verwenden interagieren können: Zum Beispiel, wenn Sie Produkte drucken Sie etwas Ähnliches tun werden

$("#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 2

In HTML5 können Sie benutzerdefinierte Attribute für die Tags deklarieren.

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

Danach können Sie mit einzelnen Artikel mit jQuery abfragt

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

Answer 3

können Sie dieses Skript verwenden, dann müssen Sie eine Klasse hinzufügen Ihren divs namens 'removeItem'

// JQuery Bibliothek

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