I have something like this
<span style="font-size: 1.7px; letter-spacing: -1.7px; color: #edf6fc">text</span>
and
<span style="font-size: 99.81%; color: #080007">text </span>
How would I select the first one and add; let's say display: none to its style (or remove that span) but not the second one using JavaScript.
Or how do I remove all the span that has CSS property letter-spacing?
Give class or id to those elements.
.spanOne{
display: none;
}
or
create those elements dynamically and store them in variables. Then you can use those variables to add or remove properties.
var spanOne = //code to create span element;
var spanTwo = //code to create another span element;
$(spanOne).hide();
or
$('#parentElementID').children('span').eq(0).hide();
UPDATED:
$('div').children('span').filter(function () {
return this.style.fontSize == "17.7px"; //in your case 1.7px
}).eq(0).css('backgroundColor', 'red');
PS: I recommend adding a class name or id to that element.
A simple way would be to add a class name or id:
<span id="iHateYou" style="font-size: 1.7px; letter-spacing: -1.7px; color: #edf6fc">text</span>
<span style="font-size: 99.81%; color: #080007">text </span>
and the js:
document.getElementById('iHateYou').remove();
Use an add on like Firebug for example in Firefox, right click on the tag in issue, like here <span> then select inspect element. Go to the code and find out its parent with a unique identifier (ID), select that parent id and add CSS by parent child selection.
#abc span{display: none;}
Add this in your stylesheet. This will make the child of the unique identifier to attach your style and override that one that is applying to it.
