Develop Reference

How to use Jquery to change div css/scss on a dropdown menu?

I am a jquery beginner. I'm trying to make a dropdown menu where when the user clicks one of the buttons it will link to its correct section. Before a user clicks a button, all sections must be hidden (display: none), but when an option is selected from the dropdown, I want to use js/jquery to trigger a css change in the section div to appear (display: block). Pretty lost and I can't seem to get the jquery to work, any help would be greatly appreciated!
Thank you!
$(document).ready(function() {
$('#departments a').on('click',function()) {
$(this).css({'display','block'});
});
}
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red
caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

As you can see with the console on your snippet code your Javascript was very wrong:
You forgot to close the last ) (of the ready() function)
You close the function .on() before the {} of the callback
You update the css with {'display','block'} instead of {'display': 'block'}
$(document).ready(function() {
$('#departments a').on('click', function() {
$(this).css({'display':'block'});
});
});
article.apply {
padding-bottom: 6rem;
}
article.apply p {
margin-bottom: 4rem;
}
article.apply div.math {
display: none;
}
article.apply div.cmsc {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<a id= "selectedDept" class="dropbtn button button-red caret"> Search </a>
<div id = "departments" class="dropdown-content">
<a class= "dept" href="#math">MATH</a>
<a class= "dept" href="#cmsc">CMSC</a>
</div>
</div>
<article class="apply">
<div class=“math”>
<h2> Hello World </h2>
</div>
<div class=“cmsc”>
<h2> Hello World! </h2>
</div>
</article>

Html select only one button at once for non Radio Buttons

This is my Code
$(document).ready(function(){
$("a.btn1").click(function() {
$(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
});
$("a.btn2").click(function(){
$(this).find("i").toggleClass("fa-smile-o fa-frown-o");
});
$("a.btn3").click(function(){
$(this).find("i").toggleClass("fa-unlock fa-unlock-alt");
});
});
.fa {
font-size: 58px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
<a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
<a class="btn2"><i class="fa fa-smile-o"></i></a>
<a class="btn3"><i class="fa fa-unlock"></i></a>
</div>
Now Here I want to Select only One button/"<a" at once and here they are not Radio Buttons
I tried with many examples but mostly they are Radio buttons
But I want to use it for <a tag and only one option at once..
But here its selecting all three
after that submit only one.. Due to this at Submit I am facing errors.. the value of score is mismatching.. please help on this kind

One option is to add active-class and original-class on <a>. Just get those value using .attr()
$(".col-sm-10>a").click(function() {
var selected = $(this).find('i')[0];
$(".col-sm-10>a>i").removeClass(function(e) {
return selected !== this ? $(this).attr('active-class') : $(this).attr('original-class');
}).addClass(function() {
return selected !== this ? $(this).attr('original-class') : $(this).attr('active-class');
});
});
.fa {
font-size: 58px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="col-sm-10 col-sm-offset-1">
<a class="btn1"><i original-class='fa-thumbs-o-up' active-class='fa-thumbs-o-down' class="fa fa-thumbs-o-up"></i></a>
<a class="btn2"><i original-class='fa-smile-o' active-class='fa-frown-o' class="fa fa-smile-o"></i></a>
<a class="btn3"><i original-class='fa-unlock' active-class='fa-unlock-alt' class="fa fa-unlock"></i></a>
</div>

New answer with updated info
-- can toggle answer already chosen
$('.buttons a').click(function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
$('.buttons a i:nth-child(1)').removeClass('hidden').addClass('shown');
$('.buttons a i:nth-child(2)').removeClass('shown').addClass('hidden');
} else {
$('.buttons a').removeClass('selected');
$('.buttons a i:nth-child(1)').removeClass('hidden').addClass('shown');
$('.buttons a i:nth-child(2)').removeClass('shown').addClass('hidden');
$(this).addClass('selected');
$(this).find('i').toggleClass('shown').toggleClass('hidden');
}
})
.fa {
font-size: 58px !important;
}
.selected i {
color: red;
}
i.hidden {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons col-sm-10 col-sm-offset-1">
<a class="btn1">
<i class="fa fa-thumbs-o-up shown"></i>
<i class="fa fa-thumbs-o-down hidden"></i>
</a>
<a class="btn2">
<i class="fa fa-smile-o shown"></i>
<i class="fa fa-frown-o hidden"></i>
</a>
<a class="btn3">
<i class="fa fa-unlock shown"></i>
<i class="fa fa-unlock-alt hidden"></i>
</a>
</div>
https://jsfiddle.net/Hastig/eno21p25/
Original style answer
-- cant toggle chosen answer
If you're wanting to add a class to the a tag to show selection you can remove 'selected' from all a tags and add it to this..
$('.buttons a').click(function() {
$('.buttons a').removeClass('selected');
$('.buttons a i').removeClass('fa-thumbs-o-down fa-frown-o fa-unlock-alt');
$('.buttons a.btn1 i').addClass('fa-thumbs-o-up');
$('.buttons a.btn2 i').addClass('fa-smile-o');
$('.buttons a.btn3 i').addClass('fa-unlock');
$(this).addClass('selected');
if ($(this).hasClass('btn1')) {
$(this).find("i").toggleClass("fa-thumbs-o-up fa-thumbs-o-down");
} else if ($(this).hasClass('btn2')) {
$(this).find("i").toggleClass("fa-smile-o fa-frown-o");
} else if ($(this).hasClass('btn3')) {
$(this).find("i").toggleClass("fa-unlock fa-unlock-alt");
}
})
.fa {
font-size: 58px !important;
}
.selected i {
color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons col-sm-10 col-sm-offset-1">
<a class="btn1"><i class="fa fa-thumbs-o-up"></i></a>
<a class="btn2"><i class="fa fa-smile-o"></i></a>
<a class="btn3"><i class="fa fa-unlock"></i></a>
</div>
https://jsfiddle.net/Hastig/hncLnzh4/

How to show div when hovering dynamically a link?

I have different a-tags which gets generated dynamically. Each link will generate an own div with different contents so each div has an individual content as well as an individual height.
Now I would like to achieve that when hovering an a the matching div will be shown. The div then should be shown at the mouse position and should be position from bottom to top direction so that the div is "growing in upward direction" because the links are on the bottomside of the page.
Here is what the code is look like ($z is a counter):
<a href="<?php echo $link_djv;?>" class="rsshover" id="djvl_<?php echo $z;?>" target="_blank">
<li>
<p class="headline"><?php echo $title_djv;?></p>
</li>
</a>
<div class="preview" id="djvd_<?php echo $z;?>">
<?php echo $description_djv;?>
</div>
I read already through different threads but wasn't able to find a proper way on how to solve this issue. Thanks in advance.

Run Snippet
This is a basic version of what you need. obviously the animation needs work but should give you a good starting point.
class ToolTipControl {
constructor () {
this.xCoordinate;
this.yCoordinate;
this.links = document.querySelectorAll('a');
this.addEventListeners();
this.activeLink = false;
}
addEventListeners () {
for (let link of this.links) {
link.addEventListener('mouseenter', (e) => this.handleMouseEnter(e));
link.addEventListener('mouseleave', (e) => this.handleMouseLeave(e));
}
document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
}
handleMouseMove (event) {
this.xCoordinate = event.pageX;
this.yCoordinate = event.pageY;
if (this.activeLink) {
this.activeLink.style.top = `${this.yCoordinate}px`;
this.activeLink.style.left = `${this.xCoordinate}px`;
}
}
handleMouseEnter (event) {
this.activeLink = event.target.nextElementSibling;
this.activeLink.style.maxHeight = '50px';
}
handleMouseLeave (event) {
let targetsContent = event.target.nextElementSibling;
targetsContent.style.maxHeight = 0;
this.activeLink = false;
}
}
new ToolTipControl();
.preview {
position: absolute;
max-height: 0;
overflow: hidden;
transition: max-height 0.6s ease;
}
li {
list-style: none;
}
a {
padding: 20px;
margin: 20px;
color: white;
display: block;
background-color: grey;
width: 100px;
}
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 1
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 2
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
<li>
<p class="headline">some title</p>
</li>
</a>
<div class="preview" id="djvd_098">
content 3
</div>

You're going to need to add a mouse over event of your link and then a javascript function to show your div in the right location. Then you'll need a mouseout even to hide the div again.
what I would start with is change your php code to be:
<a href="<?php echo $link_djv;?>" class="rsshover" onmouseover="showDiv('<?php echo $z;?>');" onmouseout="hideDiv('<?php echo $z;?>');" id="djvl_<?php echo $z;?>" target="_blank">
<li>
<p class="headline"><?php echo $title_djv;?></p>
</li>
</a>
<div class="preview" id="djvd_<?php echo $z;?>" style="display:none;">
<?php echo $description_djv;?>
</div>
Then add a javascript function:
<script>
function showDiv(counter) {
document.getElementById('djvd_' + counter).style.display = 'block';
// this is where you'd position your div location
}
function hideDiv(counter) {
document.getElementById('djvd_' + counter).style.display = 'none';
}
</script>

You can use CSS by putting the div.preview inside the a.rsshover
.rsshover .preview {
display: none;
}
.rsshover:hover .preview {
display: block;
}
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">1</p>
</li>
<div class="preview">
ONE
</div>
</a>
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">2</p>
</li>
<div class="preview">
TWO
</div>
</a>
<a href="#" class="rsshover" target="_blank">
<li>
<p class="headline">3</p>
</li>
<div class="preview">
THREE
</div>
</a>

I don't understand how exactly do you want your preview to be displayed, but this should help you.
(function($) {
var $currentElement;
$('.rsshover').on('mouseenter', function(e) {
$currentElement = $('#djvd_' + $(this).attr('id').substr(5));
$currentElement.css({
position: 'absolute',
display: 'block',
top: e.clientY + 'px',
left: e.clientX + 'px'
});
}).on('mouseleave', function() {
$currentElement.hide()
})
})(jQuery)
.preview {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="rsshover" id="djvl_1" target="_blank">
<li>
<p class="headline">Headline</p>
</li>
</a>
<div class="preview" id="djvd_1">
Description 1
</div>
Also, please don't put <li> tags inside anchor <a>.

How can I disable parent background div when a child container div is active?

I want to disable a parent background div which contains grid with data. On the grid there are options like sorting and exporting the data into csv/pdf. Also, on this grid there is a filter button, on click of which(via ng-click= xyz();) a filter overlay comes. This is a child container div inside the parent div. I want to disable the parent grid div when this filter overlay div opens i.e., disable the sorting and export and any other functionalities on the parent div.
Any help form anyone? My entire project is in angular js. An example with a demo will be great!
In agg.service.js
angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {
var service = {
openFilterOverlay: function() {
console.log("Toggle Filter overlay00");
var filteroverlay = angular.element(".filter-overlay");
if(filteroverlay.hasClass('open')) {
filteroverlay.removeClass('open');
} else {
filteroverlay.addClass('open');
}
angular.element('.tooltip').hide();
},
};
return service;
}]);
In index.html
<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">
<div class="ddt-container">
<h2>
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
</div>
<!--div container for filter overlay starts here-->
<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
<h2 ng-hide="true" class="remove">
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
<div class="ddt-sidebar filter-overlay col-md-2">
<div class="row">
<div class="col-md-6">
<div class="form-group ddt-filter-box-group">
<select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
<option value="">My Saved Filters</option>
</select>
</div>
</div>
<div class="col-md-6">
<button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>
</div>
</div>
<!--The code continues having several filter box -->
<div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
<div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
<ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>
In summaryGrid.html
<div class="grid-header">
<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
<i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>
In styles.css
.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
}
.filter-overlay.open {
transition: 1s;
left: 0;
}
.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}
.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}
.container-fluid .row{
margin-left: 0;
margin-right: 0;}
.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}
.tab-content > .tab-pane {
display: none;}
.tab-content > .active {
display: block;}

If you disable the parent element then obviously the children elements will also be disabled. Instead of making them parent and children you can place those two divs as siblings and hide them individually depending on the visibility of the element.

JavaScript - removeClass from matching img title?

I am making new question thread, because I wasn't clear and I agree with that.
So, I have clickable item-cards, if you click on one the class name changes to selected and it also adds the item which you click on to the cart. Each cart item has X behind, if you click it, it will remove the item from the cart, but it doesn't remove the selected part. If I added there that it would remove that class, then it removed it from all items. Example, if I add 2 items in cart and I deleted one from the cart, then it removed the selected class from all, but how could I make it so it would only removes it from, which has same img title? Here are some examples:
Selected Item HTML
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
<div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
<div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $110.52 (You save: $-39.06)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>
Code, if you click on X
$("#itemcart span").click(function() {
$(this).parent().remove()
Code how X is being added
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
Clicking on item-card
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
$("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
$("#itemcart span").click(function() {
$(this).parent().remove()
$(".item-card").removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});

Try this, save selected item in data and get it on click:
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
$("#itemcart").append(cart_item);
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
var self = $(this);
cart_item.on('click', 'span', function() {
$(this).parent().remove()
self.removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});

Here's a running snippet with fake entries. You have to adapt indentifiers to your dynamic code.
Delegate event listening to the <ul> element. Listen to clicks on the <ul><li><div><span> element and remove the <li> 2 parents upward.
<html>
<body>
<ul class="item-store">
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1000">
<div class="iteam" style="text-decoration: underline;text-align: left">
Butterfly Knife | Crimson Web
</div>
<div class="condition" style="text-align: left;text-size:13px">
Field Tested
</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">
BitSkins Price: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1001">
<div class="iteam" style="text-decoration: underline;text-align: left">
Butterfly Knife | Crimson Web
</div>
<div class="condition" style="text-align: left;text-size:13px">
Field Tested
</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">
BitSkins Price: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
//Code, if you click on X
$(".item-store").on('click', '.item-card span', (function() {
$(this).parent().parent().remove();
}));
//Code how X is being added
//$(".item-cart div").each(function()
$(".item-card ").each(function()
{
if( $(this).children().length > 0){
$(this).append($("<span> x</span>"));
} else{
$(this).append($("<span> X</span>"));
}
});
</script>
</body>
</html>