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>
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>
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.
Try this $('label').html('');.
$('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.
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
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…
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
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!
Related
I have a list of divs on a page. I have a filter system that fills in a 'data-' element with a possible list of values.
Example:
<div data-myvalues="value1,value2,value3"></div>
<div data-myvalues="value2,value3"></div>
<div data-myvalues="value1,value2"></div>
<div data-myvalues="value1,value3"></div>
Then I have some jQuery that tries to filter based on some selections that include the values in the data-myvalues attribute. However, the jQuery filter does not quite work because I think it sees the values as including the comma (,) in the value.
How, in jQuery, would I filter based on an if the divs include the values or not. I am currently using the jQuery
$("div[data-myvalue*='value1']").show();
But it seems to now quite work for some reason it will work if the data-myvalues only has one value in it, the jQuery works, but if there are multiples separated by a comma, the jQuery does not work.
I have a JS fiddle here with a simple sample code I was messing with to get the proof of concept to work.
https://jsfiddle.net/ebz3cmjn/1/
Is there a better way to list values on an element then filter them?
Thanks in advance.
You can try something like this:
$(document).ready(function() {
$.each($('div'), function(i, v){
var values = $(v).data('myvalues');
if(values.indexOf('value1') != -1) {
$(v).show();
} else {
$(v).hide();
}
})
});
And html content with data values:
<div data-myvalues="value1,value2,value3"></div>
<div data-myvalues="value2,value3"></div>
<div data-myvalues="value1,value2"></div>
<div data-myvalues="value1,value3"></div>
Hope this helps.
The data attribute takes JSON object which you can take advantage of.
Given the following element:
<input data-nations='["anothernation", "nationman", "country"]' type="text" value="Germany">
You could filter the desired elements based on the target value:
var targetNation = "nationman";
$("input[data-nations]")
.filter(function () {
// Returns the list as array
return $(this).data("nations").indexOf(targetNation) > -1;
})
.css("background-color", "blue");
Note the two differences between the quotes:
// will parse correctly
data-nations='["anothernation", "nationman", "country"]'
// will NOT parse correctly since it will be treated as plain text
data-nations="['anothernation', 'nationman', 'country']"
Try with .not() like the following way:
$(document).ready(function(){
$("input[data-me*='nationman']").css("background-color", "yellow");
$("input").not("[data-me*='nationman']").css("background-color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-me="nationality" type="text" value="Chinese">
<input data-me="nationman" type="text" value="English">
<!--This doesn't work with more than one value-->
<input data-me="nationman,country" type="text" value="Germany">
<input data-me="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>
You can also loop through all elements with .each():
$(document).ready(function() {
$('[data-myvalues]').each(function(){
var values = $(this).data('myvalues');
if(values.includes('value1'))
$(this).show();
else
$(this).hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-myvalues="value1,value2,value3">value1,value2,value3</div>
<div data-myvalues="value2,value3">value2,value3</div>
<div data-myvalues="value1,value2">value1,value2</div>
<div data-myvalues="value1,value3">value1,value3</div>
Checkout the snippet;
I have modified you code a litte bit, hope this will help to get your answer;
This is a little bit tricky answer, but you can easily understand the code
$(document).ready(function(){
var el = $('input');
el.each(item =>{
var attr = el[item].dataset
if(attr.me.match(/nationman/)){
el[item].setAttribute('style', 'background-color:yellow')
}else{
el[item].setAttribute('style', 'background-color:red')
}
})
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input data-me="nationality" type="text" value="Chinese">
<input data-me="nationman" type="text" value="English">
<!--This doesn't work with more than one value-->
<input data-me="nationman, country" type="text" value="Germany">
<input data-me="anothernation" type="text" value="Norwegian">
<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>
</body>
</html>
Try This I think it will work
$(document).ready(function(){
$("input[data-me*='nationman']").css("background-color", "yellow");
$("input").not("[data-me*='nationman']").css("background-color", "red");
});
fI am trying to change a label that says "Copies" in this
$(document).ready(function() {
$('.availableLabel.copiedCountLabel').text("Available in Region");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="availableDiv0" class="availableDiv copiesCountSection">
<span class="availableLabel copiesCountLabel">Copies: </span>
<span style="display:inline-block;" name="smallSearchingGif" id="copiesCountNumber1040573" class="availableNumber copiesCountNumber">
2
</span>
</span>
How would I go about changing the text "Copies" to "Available in Region".
Maybe, this class is wrong?
.copiedCountLabel
Try to use class .copiesCountLabel as in your html code:
$(document).ready(function(){
$('.availableLabel.copiesCountLabel').text("Available in Region");
});
You have a typo in your selector.
You want to get copiesCountLabel, but trying to get copiedCountLabel.
Also think about using the id attribute for such unique classes.
If you want to select the label with both the classes need to write the selectors together without spaces in between.
In your case it is .availableLabel.copiesCountLabel the classes of label.
$(document).ready(function() {
$('.availableLabel.copiesCountLabel').text("Available in Region ");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="availableDiv0" class="availableDiv copiesCountSection"><span class="availableLabel copiesCountLabel">Copies: </span><span style="display:inline-block;" name="smallSearchingGif" id="copiesCountNumber1040573" class="availableNumber copiesCountNumber">2</span></span>
One suggestion would be in case if this is the only element which needs to be change then better to use id instead of class
I will add in the automatic ID selector A, but could not for more than one selector.
I created the code like this:
<div class="comment_name"><a id="testing" href="http://test.wordpress.com">Djohan</a></div>
<div class="comment_name"><a id="testing" href="http://test.blogspot.com">Yogi</a></div>
<script>
var ksDOM=document.getElementById('testing').href;
var sprit=ksDOM.split(".")[1]
$(".comment_name a").attr("href",sprit);
</script>
Please help me. Below is an example of the full code:
http://www.kangsigit.com/p/editor.html?filename=not_work
IDs should be unique. You can rather use same class name and then class selector to target them. Also you can use callback function of .attr() to set new attribute value:
$(".comment_name a").attr('href',function(e){
return $(this).attr('href').split(".")[1];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="comment_name"><a id="testing_1" href="http://test.wordpress.com">Djohan</a></div>
<div class="comment_name"><a id="testing_2" href="http://test.blogspot.com">Yogi</a></div>
I use jQuery to append the content into each contentx class like.
<div id="sidebar">
<div class="contentx"></div>
<div class="contentx"></div>
</div>
<script>
$("#sidebar .contentx").each(function()
{
//Append here
}
</script>
After Append I have, for example :
<div id="sidebar">
<div class="contentx">
something 1 is inserted here.
</div>
<div class="contentx">
something 2 is inserted here.
</div>
</div>
but I want to remove class="contentx" whenever the content is appended. This mean I have only :
<div id="sidebar">
something 1 is inserted here.
something 2 is inserted here.
</div>
How
Option 1
If you just want to remove the class "contentX" from the div after the content has been added, you can try the following:
$('#sidebar .contextX').each(function () {
// Append here.
}).removeClass('contextX');
EDIT: Seems I misread the question a little (based on your indicated desired output).
Option 2
If you want to remove the entire element and replace it with the content of your choice? For that, you can try:
$('#sidebar .contextX').each(function () {
$(this).replaceWith('<new content here.>');
});
jQuery replaceWith
Besides the append, call removeClass
$("#sidebar .contentx").each(function()
{
//Append here
$(this).removeClass('contentx');
}
Try this
var tmp = $(".contentx").html();
$('.contentx').append(tmp);
var tmp2 = $(".contentx").html();
$('.contentx').remove();
$('#sidebar').append(tmp2);
I have this hidden link, which is needed for other purposes:
<span id="notitle" style="display: none;">
</span>
The link is generated dynamically and automatically includes the title attribute. But I'd like to remove the title attribute since the value is copied when the user copy-pastes surrounding text.
I thought of using javascript. This is what I've got so far:
<html>
<head>
<script type="text/javascript">
function notitle() {
var mylist=document.getElementById("notitle")
var listitems= mylist.getElementsByTagName("a")
for (i=0; i<listitems.length; i++) {
listitems.setAttribute("title", "");
}
}
</script>
</head>
<body onLoad="notitle()">
<p>Before hidden link:
<span id="notitle" style="display: none;">
This Link should have no title attribute
</span>
After hidden link.</p>
</body>
</html>
But doesn't work. I guess it's about listitems.setAttribute("title", "");
Any idea? Cheers :)
listitems is the collection, so your code is probably throwing an error.
Anyway, you want:
listitems[i].setAttribute("title", "");
First of all, you need to select the one specific item by using listitems[i], second, I think you can do it as simple as this:
listitems[i].title = ""
You need to add the i index:
listitems[i].setAttribute("title", "");
You're doing
listitems.setAttribute("title", "");
i times.
Add an array index into the list.