We Keep Coding

Auto click on child element with random ID

I'm a complete javascript noob and I'm trying to automatically click a button inside a div.
<div id="KB_3383878" class="td button-visible">
<button id="KB_1532704" class="inputsubmit">Search</button>
</div>
The numbers after KB_ are changed randomly each time the button is clicked. I am not able to click based off the inputsubmit class as there are 3 identical buttons, of which 2 are hidden and they rotate which one is visible after x clicks, and the inputsubmit class is also rotated between inputsubmit and enterclass.
So I have to find the child element of the div with the button-visible class.
The JS script I've tried using so far has no effect what so ever:
window.onload = function(){
var parent = document.getElementsByClassName('button-visible');
var children = parent.children[0];
setInterval(function(){
parent.button.click();
},1000);
};

It seems you are referring to the wrong var. parent.button.click() should be referring to children (which I would name firstChild or something).

Hiding and showing divs when the amount of divs is unknown

I have a page with multiple posts divs and have a hidden comment form for each post. What is the best way to utilize JQuery/JavaScript to display only the comment form for that post after a button or link is clicked.
<div class="post">
<p>Some Content</p>
Comment
<div class="commentForm" style="display:none"></div>
<div>

$('.commentButton').on('click', function(){
$(this).next().slideToggle();
});
Delegate the click event to the commentButton which should toggle the commentForm. Inside of the event, move to the next element, and perform a slideToggle(). In this way, clicking on the comment button will both show and hide only the next one.
Further to the point, if you wish to hide all other commentForms so only 1 is open at a time, you can simply add:
$('.commentForm').hide();
before you perform the .slideToggle().

put id in your div
<div class="commentForm" id="myID" style="display:none"></div>
now in script
if(someCondition) {
document.getElementById('myID').style.display = 'hidden';
}else {
document.getElementById('myID').style.display = 'visible';
}

next() might not always be working because many times an element is not after the button (that triggers the action) itself.
If that is the case you can do the following:
$('.commentButton').on('click', function(){
$(this).parents('.post:eq(0)').find('.commentForm(0)').show();
// or: fadeIn(500); / fadeOut(500);
// or: slideToggle(); / slideUp(); / slideDown();
// or: css('display, 'block'); / none
});
This will find it's first parent with the class post and than the element inside it with the class commentForm even if its inside another element or in another etc.
In the example of yours you dont nescesaraly need it, but think of just selecting elements that do not have any classes or IDs :)

Jquery only affect one element in a class being hovered

Not sure if this is possible.
I want to select all elements with a class name and only affect the one element being hovered at that time and not the whole class. i can't use ids since they are a lot.
$('.hideme').hover(function(){
$('.hideme').hide();
});
and then.
<div class='hideme'></div>
when the above hides, the following shouldn't hide.
<div class='hideme'></div>
<div class='hideme'></div>
<div class='hideme'></div>

If you try to hide by using clss name, then DOM will hide all the element with same name.
So you have to use this keyword for selecting current hovered element.
Try following:
$('.hideme').hover(function(){
$(this).hide();
});

How to build a jQuery-powered switcher to add/remove css attributes?

I'm trying to build a box container that expands when clicking in a "read more" button and collapse to the initial size when clicking in the same button (now a "collapse" button).
In the DOM I have a .leer-mas button inside a .post container. And the following jQuery code:
//When link with class .leer-mas is clicked, get the parent element's id and add some css attributes
$('.leer-mas').click(function() {
var item = $(this).closest('.post');
item.css('height', 'auto');
$(this).addClass('leer-menos');
$(this).text('Leer menos');
});
//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$('.leer-mas.leer-menos').click(function() {
var item = $(this).closest('.post');
item.removeAttr('height');
$(this).removeClass('leer-menos');
})
The first action works like a charm. But the second action does nothing... And I think I'm missing some fundamentals of jQuery, as the syntax is identical and maybe that is not the way it should be :)
Any ideas? Thanks.
Edit - I had a few errors on my code. Though I'm still trying to get it with a single switcher, I have a working version.
New DOM looks like this:
<div class="post">
<div class="leer mas">
</div>
<div class="leer menos">
</div>
</div>
The code now looks like this:
//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.mas').click(function() {
var item = $(this).closest('.post');
//Send the id to the PHP script, which returns 1 if successful and 0 if not
item.css('height', 'auto');
$(this).hide();
$(this).next('.leer.menos').show();
});
//When link with class .leer-mas is clicked, get the parent element's id (which is also that element's id in the database)
$('.leer.menos').click(function() {
var item = $(this).closest('.post');
//Send the id to the PHP script, which returns 1 if successful and 0 if not
item.removeAttr('style');
$(this).hide();
$(this).prev('.leer.mas').show();
});
This works smoothly. But If I get it working with the intended structure of the original question (with a single button), i would be happier :)

it is because the class leer-menos is added dynamically... so when the event registration code is executed there is no element with classes leer-mas and leer-menos.
A possible solution is to use event delegation
//When link with class .leer-mas is clicked, get the parent element's id and remove some css attributes
$(document).on('click', '.leer-mas.leer-menos', function() {
var item = $(this).closest('.post');
item.removeAttr('height');
$(this).removeClass('leer-menos');
})

You're trying to use .removeAttr() to remove a CSS Property within the attribute "Style". This is incorrect, try using item.removeAttr('style');

Not exactly what you asked for, but you can draw ideas from this:
$('.leer-mas').click(function() {
var item = $(this).closest('.post');
// toggle "height" between 'auto' and null
item.css('height', item.css('height') == 'auto' ? null : 'auto' );
// toggle class 'leer-menos'
$(this).toggleClass('leer-menos');
// toggle text between 'Leer menos' and ''
$(this).text( $(this).is('.leer-menos') ? 'Leer menos' : '' );
});

Add class to parent div

I am working with the google maps drawing manager. They don't put id's or class names on the drawing tools button bar so I'm trying to do this myself.
First I want to remove the circle button which the below works fine, but I want to add my own button so need to add a class name to the parent div "gmnoprint" but google has about 5 div's all with the same class name. I just want to add it to the one where the circle button was found.
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint">
<div>
<div> <== This is what I found in my search
<span>
<div>
<img></img>
</div>
</span>
</div>
</div>
</div>
I am able to find the element I want and remove it, but adding a class to its wrapper div is proving a bit difficult for me.
This works for removing the button
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove();
});
This doesn't work.. Just add's the class to all ".gmnoprint" div's
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove().parent().addClass("test");
});

remove() removes the element from the DOM and returns the free-standing jquery object which has no connection to the DOM at all. A call to parent() after calling remove() is incorrect and that likely is the cause for your issue.
Try splitting your statements to:
var toRemove = $(this).find("[title='Draw a circle']");
toRemove.parent().addClass("test");
toRemove.remove();

You can use jQuery insertAfter and out your button after that default button then remove it.
$(".gmnoprint").each(function(){
var defBtn = $(this).find("[title='Draw a circle']");
$('<button class="my-button" />').insertAfter(defBtn);
defBtn.remove();
});
Or use jQuery after like this:
$(".gmnoprint").each(function(){
$(this)
.find("[title='Draw a circle']")
.after($('<button class="my-button" />'))
.remove();
});

You can use child selector to target the elements
$(".gmnoprint > div > div").addClass('myClassName');
At that point you could replace the html of the whole div , or find the span and replace it's inner html. Using html() method you don't need to use remove() as it will replace all contents of the element(s)
$(".gmnoprint > div > div").addClass('myClassName').find('span').html('<newButton>');
API Reference : http://api.jquery.com/child-selector/