Javascript remove specific css value

Question

I am trying to remove the word "Quantity" from below and I think I am close but obviously something is off since it's not working.

<div class="DetailRow" style="display: ;">
    <div class="Label">
        <label>Quantity</label>

With:

<script type="text/javascript">
$(document).ready(function(){
    $('#text_qty_').parent().parent().remove();
    $('#qty_').parent().parent().remove();
    $('.QuantityInput').remove();
    $('label[for="Quantity"]').css('display', 'none').remove();
});
</script>

Trent Jones · Accepted Answer · 2015-10-23 00:30:19Z

1

Try doing it with pure js after adding an id.

<div class="DetailRow" style="display: ;">
<div class="Label">
<label id ="text">Quantity</label>

<script type="text/javascript">
$(document).ready(function(){
    document.getElementById("text").innerHTML = "";
});
</script>

answered Oct 23, 2015 at 0:30

Trent Jones

192 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RobG Over a year ago

"pure JS" with $(...)? ;-)

alisa Over a year ago

Unfortunately I am trying to do it without touching the css. It's a theme in BigCommerce and I am just adding a product template.

alisa Over a year ago

Okay yeah... well I am trying to do it without editing the original css. And I am not good at this stuff, great at css and front-end design, but limping along at js and php.

Mark Beleski · Accepted Answer · 2015-10-23 00:31:11Z

0

Your label needs an id. In this example, I'll use "quantity" as the id.

$('label[id="quantity"]').hide();

This will work but this will apply the style to all labels.

$('label')

Using Pure JavaScript is best though.

answered Oct 23, 2015 at 0:31

Mark Beleski

4461 gold badge4 silver badges9 bronze badges

1 Comment

alisa Over a year ago

Thanks, that's what I was afraid of.

jkris · Accepted Answer · 2015-10-23 00:32:47Z

0

Try this $('label').html('');.

answered Oct 23, 2015 at 0:32

jkris

6,6691 gold badge24 silver badges31 bronze badges

1 Comment

SuperBiasedMan Over a year ago

Please consider editing your post to add more explanation about what your code does and why it will solve the problem. An answer that mostly just contains code (even if it's working) usually wont help the OP to understand their problem. It's also recommended that you don't post an answer if it's just a guess. A good answer will have a plausible reason for why it could solve the OP's issue.

Griffith · Accepted Answer · 2015-10-23 00:35:20Z

0

$('label[for="Quantity"]') will not retrieve <label>Quantity</label> since it doesn't have the attribute for. Just use $('label') or $('.Label label') and it will work.

edited Oct 23, 2015 at 0:35

answered Oct 23, 2015 at 0:30

Griffith

3,2171 gold badge19 silver badges30 bronze badges

5 Comments

alisa Over a year ago

There are other <label>this</label> tags that have to remain.

Griffith Over a year ago

Then how about using $('.Label label:first').remove();?

alisa Over a year ago

I wish it was that easy! There are a bunch of these that are generated as they change options for each product, so if I can't identify the word "Quantity" and remove it, then everything else will get messed up. If it's not possible then I'll just have to rewrite several pages and they will have to pay close attention any time there's an update to the template.

Griffith Over a year ago

The how about $('label').filter(function() { return $(this).text() === "Quantity"; }).remove();?

Griffith Over a year ago

Or $("label:contains('Quantity')").remove();

Mi-Creativity · Accepted Answer · 2015-10-23 00:42:14Z

0

Try this if you want to remove the label element itself:

 var labels = $('label');
 if( labels.text() == 'Quantity' ){
      labels.remove();
}

To just remove the word Quantity without removing the label element:

labels.text('');

If you want to remove its parent:

labels.parent().remove();

Also to remove the parent's parent, the <div class="DetailRow"> use this:

labels.parent().parent().remove();

JSFiddle

edited Oct 23, 2015 at 0:42

answered Oct 23, 2015 at 0:36

Mi-Creativity

9,66410 gold badges40 silver badges49 bronze badges

Comments

RobG · Accepted Answer · 2015-10-23 00:42:59Z

0

You can use plain javascript and existing markup with querySelector:

var el = document.querySelector('.DetailRow .Label label');
if (el) {
  // do stuff
}

If you want to remove the content, then:

el.textContent = '';

If you want to remove the element, then:

el.parentNode.removeChild(el);

and so on…

answered Oct 23, 2015 at 0:42

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Himechi90 · Accepted Answer · 2015-10-23 03:28:52Z

0

I think you can check the label value, and remove the label if the value equals to "Quantity"

Try this:

<div class="DetailRow">
    <div class="Label">
        <label>Quantity</label>
    </div>
</div>

And the script:

$(document).ready(function(){
    $(".DetailRow label:contains('Quantity')").hide();
});

http://codepen.io/Himechi90/pen/rOJYjX

answered Oct 23, 2015 at 3:28

Himechi90

3482 silver badges12 bronze badges

Comments

alisa · Accepted Answer · 2015-10-23 04:10:23Z

0

Thank you Griffith! This worked perfectly. Full code for anyone trying to remove the quantity and quantity box from only some of your products on bigcommerce. Note that you need to create a separate product template and add this below %%Panel.Header%%

<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label').filter(function() { return $(this).text() === "Quantity"; }).remove();
});
</script>

Note also that your values for #text_qty_ etc may change depending on your template.

Thank you all for taking the time to help me!

answered Oct 23, 2015 at 4:10

alisa

31 silver badge2 bronze badges

Collectives™ on Stack Overflow

Javascript remove specific css value

8 Answers 8

3 Comments

1 Comment

1 Comment

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

1 Comment

1 Comment

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related