CODEWITHSUNDEEP
javascriptjquerycssremove-if
alisa
alisa

Reputation: 3

Javascript remove specific css value

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>

Upvotes: 0

Views: 89

Answers (8)

alisa
alisa

Reputation: 3

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!

Upvotes: 0

Himechi90
Himechi90

Reputation: 348

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

Upvotes: 0

RobG
RobG

Reputation: 147413

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…

Upvotes: 0

Mi-Creativity
Mi-Creativity

Reputation: 9654

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

Upvotes: 0

Griffith
Griffith

Reputation: 3217

$('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.

Upvotes: 0

jkris
jkris

Reputation: 6531

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

Upvotes: 0

Mark Beleski
Mark Beleski

Reputation: 416

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.

Upvotes: 0

Trent Jones
Trent Jones

Reputation: 19

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>

Upvotes: 1

Related Questions