Develop Reference

Getting the last element of a form jquery

I am a beginner in programming and am stuck in a problem. I want to find the last child (element) of parent (form). Then I want to insert an input element after the last child but it should be inside the form not after the form (outside). The form might contain input elements as well as select elements. How to accomplish it? I have tried the following ways but they don't work unfortunately.
var lastRepeatingGroup = $('.form-to-be-submitted:last'); // this one gives me the whole form meaning if I add something it will added at the end of the form
var lastRepeatingGroup = $('.form-to-be-submitted input:last'); //this gives me the last input element
var lastRepeatingGroup = $('.form-to-be-submitted input select').last(); //this does nothing, I think its an error
$newSection = $('<input type="button" value="newbutton" name="mybutton"/>');
newSection.insertAfter(lastRepeatingGroup); // when I use this statement it adds after the form not inside the form

So you just need some guidance on CSS Selectors and Jquery methods.
First lets look at:
The form might contain input elements as well as select elements.
So in CSS to do an or you need to use a comma:
input,select
if you are looking for direct descendants you need to use a >
form > input, form > select
These are then wrapped in jquery:
$('form > input, form > select')
Which yields all items, so we use last() to grab the last element:
var $last = $('form > input, form > select').last();
(if you don't need the > just remove it).
This was pretty close:
var lastRepeatingGroup = $('.form-to-be-submitted input select').last();
but it's looking for a select element in a input element in that class. Just needs a little adjustment:
var lastRepeatingGroup = $('.form-to-be-submitted input, .form-to-be-submitted select')
.last();
If you want to insert the element at the end of a specific element, you don't need to find the last item. Just use jquery's append
Except:
Consider the following HTML:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Test</p>" );
Each inner element gets this new content:
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>

This should work:
$('.form-to-be-submitted').children().last()
.children() will select all the children in your form and .last() filters that further to only select the last child.
And to insert content after that element, just use .after() like:
$('.form-to-be-submitted').children().last().after('<input>')
Example:
$('.form-to-be-submitted').children().last().after('<input type="radio">')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-to-be-submitted">
<input type="text">
<input type="radio">
<input type="checkbox">
<select>
<option></option>
</select>
</form>

JQuery not needed. To insert a new element just before the end of the form, simply use .appendChild().
var frm = document.getElementById("theForm"); // Get reference to form
// Create a new element and configure it
var newElement = document.createElement("input");
newElement.id = "txtUser";
// Simply append it to the form.
frm.appendChild(newElement);
console.log(frm.elements[frm.elements.length-1]); // Get last element in form
<form id="theForm">
<input type="text">
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<button type="button">Click Me</button>
</form>

Insert Text atextfter a speficic class containing a spefiic word or phrase

How can I insert a Text after a speficic class containing a specific word or phrase?
Example:
<div class="TestBox">
Hello World
</div>
Should be:
<div class="TestBox">
Hello World it's me
</div>
I tried it to solve with a script, but the problem are:
The text (It's me) is duplicating
The text is out of the div
My Script:
$('<span>It's me</span>').insertAfter($("div:contains('Hello World')"));

This is more inline with what you've tried!
you need to use appendTo instead of append
This basically, appends your span to each div the contains your class!
$("<span>It's me</span>").appendTo($("div>:contains('Hello World')"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="TestBox">
Hello World
</div>
Note:
With the example shares in comments,
On using $("div:contains('erneut.')") two divs are picked,
[div.wrapper, div.plentyMessageBox]
Therefore, use >:contains to pic the div containing the text!
$("div>:contains('erneut.')")
[div.plentyMessageBox]

$( ".plentyMessageBox" ).append( "Your text" );
This would append "Your Text" to the div. If you want to make a comparison with the text, you could try to put a conditional like this:
if()$( ".plentyMessageBox" ).text()=="Hello World") {
$(".plentyMessageBox" ).append( "Your text" );}
This is but one way of doing this, there are plenty.

You can do that by using append().
$('.plentyMessageBox').append("<span>It's me</span>")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plentyMessageBox">
Hello World
</div>

$( ".plentyMessageBox" ).each(function() {
if($(this).text() == "Hello World"){
$(this).append("<span> it's me</span>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plentyMessageBox">Hello World</div>
<div class="plentyMessageBox">Hello World it's me</div>
<div class="plentyMessageBox">Hello World NOT me</div>

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!

get the id of a textarea from this html form with jQuery

Need help getting and using the id of a textarea so that I can replace it with a ckEDITOR.
So here is the html output:
NOTE: This is the output of a foreach loop, for every database result, this is the html output and the textarea ID is a number generated from the id of the row.
<div class="blogtest" id="514">
<form action="process/updatepost.php" class="updatepost" method="post">
<input type="button" class=edity value="Edit">
// SOME BUTTONS
<br>
<div class="text">
<div class="buildtext" id="514">3</div>
<div class="editor">
<textarea name="muffin" id="516" class="ckeditor">3</textarea>
</div>
</div>
</form>
</div>
And here is the jQuery im using:
$(document).on('click','.edity',function(){
var editorID = $(this).find('.ckeditor').attr("id")
CKEDITOR.replace(editorID);
});
This doesnt work, I'm not the most advanced with jQuery so not sure why. But i get a type b is undefined error in my console log.
Also just to note; this works:
CKEDITOR.replace('516');
but the text areas are loaded dynamically in a foreach loop and I can't be creating a replace code for 1000's of editors...

You are looking for the .checkeditor element from the .edity element. Instead you can do:
$(document).on('click','.edity',function() {
var editorID = $(this).parents('.blogtest').find('.ckeditor').attr("id");
CKEDITOR.replace(editorID);
});

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/