Jacob Seen Jacob Seen - 7 months ago 19
HTML Question

JavaScript - Clicking on item and deleting it from the parent div?

So, I got an parent div and child divs. JavaScript creates child divs, ID & the text inside is different.. So I am trying to do next. There will be X behind of each item and if you click it will remove the item, is that possible to do? I tried something with JavaScript, but I didn't understand how to do that part if you click on that item then it removes that. Also, it has to remove one class as well which contains same item name. I will put some code down below.

HTML Example:

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


Those div's which are under the itemcart, are added by JavaScript, by clicking "item-card". Item-card get's names from the picture title (image of item). If the item-card is clicked, then it adds class "item-selected". If the item will be deleted by clicking on it, then it should also remove that item-selected class from the right item on item card. Is something like that possible to do?

Answer

You can use .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>