Develop Reference

Add text to a span within multiple div tags

I have a html content in which a span tag is placed inside multiple div tags.
For example :
<div id="ae_launcher" class="module tipsytip active" tabindex="0" role="button" aria-label="" style="display: none;" original-title="">
<div class="left">
<span class="copy-narrow" aria-hidden="true"></span>
</div>
</div>
Also, please note the class "ae-left" has been used 3 times in the entire page.
I need to add text inside the span tag.
I tried something like this:
<script type="text/javascript">
$('.left:eq(1) .copy-narrow').text('hidshjgdjb');
</script>
But this din't solve the issue.

you can do it via jQuery
$('#ae_launcher .ae-left > span ').text("Hello");

Assuming you have used ae-left div class as the parent of the span in all the 3 places
$('.ae-left span ').text("Text here");

<script>
var l = document.getElementsByClassName("ae-copy-narrow");
l[x].innerHTML = "some text";
</script>
x is the location you want to place between 0-2.

You can do it in this way:
$('.left > .copy-narrow').text("your Text");
This will set the innerText property of all elements with
.copy-narrow
class to your Text.
If you want to select this particular span only, you can always use the id attribute of the parent div as id attribute must be unique.
$('#ae_launcher .copy-narrow').text('your text');

You can call the class and use the .text():
<script>
$(function() {
var sometext = 'This is my text';
$('.ae-copy-narrow').text(sometext);
});
</script>
Or if you want to have html tags you can use .html():
<script>
$(function() {
var sometext = '<img src="myimage.png" />';
$('.ae-copy-narrow').html(sometext);
});
</script>

How to change input element's visibility through jquery?

For tag the below code is working fine, but for <input> isn't. Can you guide me how to solve it?
html:
<span id="toValue">AND</span>
<input id="toValue">
css:
#toValue {
visibility: hidden;
}
js:
$('#toValue').css("visibility", "visible");

Don't repeat the same id in the same page. Change it to a class:
.toValue {
visibility: hidden;
}
Html:
<span class="toValue">AND</span>
<input class="toValue">
Then:
$('.toValue').css("visibility", "visible");
Demo.
Or use different ids to each element:
<span class="toValue" id="mySpan">AND</span>
<input class="toValue" id="myInput">
Then:
$('#mySpan, #myInput').css("visibility", "visible");
Demo

ids must be unique for elements. the first element with that particular id will always be updated and the other discarded so either use the "class" attribute or change the ids

Id must be unique, Either you can also use class if you want to use common selector, here is demo of simple show and hide of your elements
function func1(){
$("#spanValue").hide();
$("#inputValue").hide();
}
function func2(){
$("#spanValue").show();
$("#inputValue").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanValue">AND</span>
<input id="inputValue" type="text">
<input type="button" onClick="func1();" value="Hide">
<input type="button" onClick="func2();" value="Show">

Same ids to multiple elements in a single page makes an invalid markup and that is hard to work when you try using js with those elements.
For tag the below code is working fine, but for <input> isn't.
It is because:
Browser stops the lookup at first element found and don't go next to look for another one.
NOTE:- If you try check the length of your selector it would always return 1.
Solution to this is that you change the id to class attribute and the css as well:
.toValue {
visibility: hidden;
}
and
<span class="toValue">AND</span>
<input class="toValue">
in js:
$('.toValue').css("visibility", "visible");

Your markup is invalid: two elements with the same id. Use class instead:
HTML
<span class="toValue">AND</span>
<input class="toValue">
CSS:
.toValue {
visibility: hidden;
}

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>

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!

Hide a decimal using jquery

I have seen lot of questions but none of them seems to have answer for this. I need this help desperately. I am hosted on Magentogo so have no acceess to the core files, however with the help of jquery I want to hide .00 from my store. My codes look like this for example. The price of the item of Rs. is also in HTML could not paste as
<div class="price-block"
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. </span>3,795.00 </span></p>
</span>
</div>
<script>
$('#price-block').html($('#price-block').html().replace(".00",""));
</script>
</body>
</html>

You have it as a class in your div
<div class="price-block" // <-- also missing >
use the class selector .
$('.price-block')
http://jsfiddle.net/WBsjA/

I think you'll need to loop each .price-block rather than trying to run it on the whole code mat once.
$('.price-block').each(function(){
$(this).html($(this).html().replace(".000","").replace(".00","").replace(".0",""));
});
Also you need to fix up your HTML markup
<div class="price-block">
<p> The price of this item is
<span class="price" id="oldprice">
<span class="WebRupee"> Rs. 3,795.000</span>
</span>
</p>
</div>
http://jsfiddle.net/daCrosby/XK48G/

Here's one approach. Since your price isn't wrapped in its own unique HTML <span> to make it easy to locate and replace, you need to parse the parent element, separate the child nodes from the text nodes, and rebuild it:
var newval;
$('.price').each(function(j, pr) {
// trick to remove the webRupee element for later
var $webRupee = $(pr).find('.WebRupee').remove().wrap('<div>').parent().html();
$(pr).contents().each(function(i, el) {
if (el.nodeType === 3 && el.nodeValue.match(/\.00/)) {
newval = el.nodeValue.replace(/\.00/, '');
}
});
$(pr).html($webRupee + newval);
});
http://jsfiddle.net/mblase75/r2V6r/

Javascript: How to change attributes of child elements?

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.