We Keep Coding

Why .closest(selector) returns more than one value?

Here is a part of my html. (it is written using ejs)
<div class="objAddDiv">
<tr><td><button class="addObj">Do this action</button></td></tr>
<table><div class="objects"></div></table>
</div>
I have several objAddDiv divs on this page. Each has the same structure inside of it. I use .append() to add more ejs to .objects. I am having a hard time adding to only the .objects div that is inside of the same div as the button. I tried doing the following
".addObj click": function(el, element){
$(".addObj").closest(".objAddDiv").find(".objects").append(//my ejs utility here)
}
The problem is that $(".addObj").closest(".objAddDiv") returns all .objAddDiv on the page. I have looked at the jquery documentation for .closest and it says closest should only return one element. Is there a better way to do this? What am I doing wrong. (these are not my real class names btw)

It's because you are calling that method on every element with a class of 'addObj':
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
So you get the closest objAddDiv to each addObj element.
Assuming you are doing this inside the click event of the button use this to get the correct element:
$(this).closest(".objAddDiv").find(".objects").append(//my ejs utility here)

Here is the answer that I figured out (for anyone who comes next) I needed to use the element I passed into the function:
el.closest(".objAddDiv").find(".objects").append(//ejs append stuff)

Select all 'a' elements from a page?

I want to select a link with some text then I put:
$("a[text='some text']")
But didn't work, then I want to test selecting all links from a page.
$("a")
But this jquery select instruction only gave me the first or maybe the most important link of the page.
Why?
An example is here:
Thanks in advance.

Coding Horror does not make use of jQuery: there is no reference to the library in the source. If you tried jQuery('a') instead, you would receive an error stating that jQuery is not defined or it is not a function.
The reason $('a') works anyway, but only returns the first element, is because $ is defined within Chrome's developer console, but as an alias of document.querySelector. This native method only returns the first matching element if any, unlike document.querySelectorAll which returns all matching elements.
There is a different command aliased to document.querySelectorAll and that is $$. Calling either one will yield all (256) elements matching the selector string:
> $$('a')
NodeList[256]
> document.querySelectorAll('a')
NodeList[256]
Both $ and $$ are documented here.

the page doesnt actually have jQuery on it. Type $ or window.$ into the console. by typing $('a') you are using the chrome Command Line API. https://developers.google.com/chrome-developer-tools/docs/commandline-api

jQuery: Refreshing an element

I'm using this accordion-like script:
jQuery(document).ready(function () {
jQuery(".content").hide();
jQuery(".heading").click(function () {
jQuery(this).next(".content").slideToggle(500)
});
});
But then I add this line in order to reload the element after the content div toggles...
document.getElementsByClassName(transition current).reload();
and as a result, the accordion no longer works... The content class is always being displayed.
Why is this line affecting the behavior of the accordion?
I'm trying to refresh the element while retaining the accordion style divs...
Any ideas?

You need to use event delegation since the elements are created dynamically
jQuery(function ($) {
$(".content").hide();
$(document).on('click', ".heading", function () {
$(this).next(".content").stop(true, true).slideToggle(500)
});
});
Still you might have a problem of all content element getting displayed once the element is reloaded, for hiding those elements you need to use any load callback system provided by the reloader you are using

You've got a syntax error here:
document.getElementsByClassName(transition current).reload();
getElementsByClassName expects a string to be passed (not to mention that the above isn't syntactically correct even if it did expect two arguments). You're trying to pass two variables (which you haven't defined). Pass a string:
document.getElementsByClassName('transition current').reload();
Blast. That doesn't work either! Reading the docs informs us that getElementsByClassName returns an HTMLCollection, which doesn't have the method reload(), resulting in another error. Are you even looking at the console?
You may be assuming that getElementsByClassName returns a jQuery object, in which case you can replace the above with $('.transistion, .current').reload();
Again, let's note that reload() isn't a native jQuery method either. I'm assuming you're bringing it in via a plugin. If I'm wrong, comment below and I'll update the answer.

I was using the isotype jQuery plugin, so the issue was resolved by adding this one line as a callback to "relayout" any changes that were loaded into the DOM.
$('#blog-list').isotope('reLayout');

Replacing onClick with addEventListener

I'm trying to remove a script entirely to an external .js file and replace the onClick event with addEventListener in the external file. I can't get this to work:
http://jsfiddle.net/kjmatthews/DE26x/
My function is a little more complex, but this is essentially copied from http://jsfiddle.net/madBYK/UumUP/, linked from the developer.mozilla.org page on element.addEventListener.
Adding onclick="return hidePurchased();" to the <input> tag does work, so the problem is not with the hidePurchased() function.
Any help would be much appreciated!

getElementsByName returns a NodeList, which doesn't have addEventListener method, so you need to actually select the guy you are intending to bind the click listener to, by dereferencing the result
Try:
var foo = document.getElementsByName("hide")[0];
Working example:
http://jsfiddle.net/DE26x/9/

Here your go. http://jsfiddle.net/DE26x/8/ From what I can tell, you only forget to select the first index of the foo array. It appears to be working now. Check it out and you will see that it has noshow class on the thing. I also added css to hide the noshow, so that you can see it working.

why does removeChild in Javascript always removes the last child and not the one it got the id from?

i have four divs with the eventlistener onclick,
calling a js function which just does the following :
this.parentNode.removeChild(this);
i expect it to remove the div i clicked on, but it does not.
instead it deletes the last child and changes the id given after to the
id of the removed child (first click, the last child) and by further clicking on the
other divs counts down the given id to one. removing
the childNodes in the array from the last to the first.
i tried a lot of variants, for example
document.getElementById('parentElementName').removeChild(this.gettAttribute('id'));
or
parent =document.getElementById('parentElementName');
to_be_removed = document.getElementById(this.gettAttribute('id');
parent.removeChild(to_be_removed);
or with childNodes // id = 1,2,3,4
to_be_removed =document.getElementById('box_content').childNodes[this.getAttribute('id')];
parent =document.getElementById('box_content');
parent.removeChild(to_be_removed);
strange i can successfully change the visibility or the backgroundColor:
document.getElementById('box_content').childNodes[this.getAttribute('id')].style.visibility='hidden';
or

Managed to remake what you intended, go to http://jsfiddle.net/6YHcv/ to check it out. Is this what you needed?
If you are on IE and use attachEvent, this in the event handler would probably refer to the global object, not your element. Otherwise I can't tell why your code isn't working.

I see a few typos in your code. Your second example should work just fine, I think (see comments):
// make sure this is the parent element's ID and not the name, as this suggests.
parent = document.getElementById('parentElementName');
//note the double 't' in getAttribute; also, you are missing an end bracket
to_be_removed = document.getElementById(this.gettAttribute('id');
//looks good
parent.removeChild(to_be_removed);
Check out this example too, though: jsfiddle
It should be as simple as calling the function this.parentNode.removeChild(this) after an onclick handler.