We Keep Coding

click events in JavaScript

I'm building a list of images dynamically. What I want to happen is when a user clicks the close text (inside my DIV element) the code will delete that particular image (list element). The code below does that the FIRST time the DIV is selected. After that it seems to ignore my div event listener and jump straight into the jquery on click function.
function removeItem(){
var test = document.querySelector('li > div').addEventListener('click', function(){
$(document).on('click', 'li', function () {
var photoId = (this.id);
$("#"+photoId).remove();
});
});
How can I make it so it will ALWAYS run when the DIV is selected instead of just the first time?
I'm new to learning about JavaScript so any help is appreciated!

When the user clicks on the DIV, you're not removing anything, you're just adding a new click listener on all LIs that removes that LI. Then the user needs to click again to trigger the second handler. It should simply be:
$(document).on('click', 'li > div', function() {
$(this).parent().remove();
});
BTW, there's no point in writing
var photoId = (this.id);
$("#"+photoId).remove();
It's simply $(this).remove(). Why go searching for an ID when you already have a reference to the element itself?

Why is my jQuery not allowing me to toggle classes?

I have a series of custom Chevron elements that I'm going to use as buttons on my site. I've managed to set up the jQuery so that the clicked chevron/button is given a class="selected" which I then use to add custom styles. If I click any other chevron then the selected class is removed from the first chevron and added to the last chevron that was clicked. All of this works fine. I have another link that can be clicked to remove the class from all of the chevrons. What I'm trying to do now is to enable the .toggle(Class) function on jQuery so that I can also remove the class="selected" by clicking the same element twice.
My jQuery code:
$(function () {
$('#chevrons > ul > li > a').click( function(){
$('#chevrons .selected').removeClass('selected');
$('#show-all').removeAttr("style");
$(this).toggleClass('selected');
});
});
$(function () {
$('#show-all').click( function(){
$('#chevrons .selected').removeClass('selected');
$(this).css('color', '#FECF2A');
});
});
I've tried the toggle without the rows:
$('#chevrons .selected').removeClass('selected');
$('#show-all').removeAttr("style");
And it works fine. I assumed (perhaps incorrectly) that the jQuery would execute line-by-line and therefore the last thing to execute. But perhaps the first line above is removing the "selected" attribute from all of the chevrons and then the last line will only ever add the class.
What am I doing wrong here?

JSFiddle: http://jsfiddle.net/oqs4nycj/1/
Just exclude the clicked item from the class removal using not():
$('#chevrons .selected').not(this).removeClass('selected');
Applying this fix to your own JSFiddle (looks very cool by the way) you get this:
http://jsfiddle.net/qsnkqhp8/1/

JSFiddle:
http://jsfiddle.net/gopj0hyj/
Edit. I did not read the question carefully enough. Sorry. I have edited the code to deselect by clicking twice.
jQuery(function ($) {
// Variables are your friends - the $ preface tells us its a jQuery object
var $chevrons = $("#chevrons");
var $buttons = $chevrons.find('a');
var $show_all = $('#show_all');
// We bind a handler to the parent $chevrons element
// this is good for performance
// It will also bind the handler to elements dynamically added with ajax.
$chevrons.on('click', 'a', function(e){
var $old_selection = $buttons.filter('.selected');
var $clicked = $(this);
// Ensure that no button is selected
$buttons.removeClass('selected');
// Checks if button already was selected.
if ($clicked.get(0) !== $old_selection.get(0)) {
// select the clicked button
$clicked.addClass('selected');
}
$show_all.removeClass('active');
// prevents the browser from scrolling to top.
e.preventDefault();
});
$show_all.on('click', function(){
$buttons.removeClass('selected');
$(this).addClass('active');
});
});

Hide div with close button jquery only with associated div

This is what I am trying to do, close the notification bar if the x inside it is clicked.
Here is my code: http://jsfiddle.net/spadez/qK3yK/2/
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
How can I make it so it only closes the warning with which it is associated with, instead of removing all of them though. I'm sure the word "this" is needed in the code, but I can't understand where.

Use jquery .parent() to get the parent of each element in the current set of matched elements, optionally filtered by a selector. Try this:
$('#close').on('click', function(e) {
$(this).parent('.alert').remove();
});
DEMO

$("#closeButton").on('click', function() {
$(this).parent().remove();
});
this will remove prev elemement.

Try this. You have to get it is parent not that element itself
$('#closeButton').on('click', function(e) {
$(this).parent('.alert').remove();
});
Or
$('#closeButton').on('click', function(e) {
$(this).parent().remove();
});
This will remove closest parent

What i assume is that you are trying to remove the parent of the 'x'.
On clicking on x . The parent div should be removed.
Make these changes in your JS file
$('#closeButton').on('click', function(e) {
var par = $(e.target).parent();
$('par').remove();
});

jQuery - how to handle clickable elements, that haven't loaded yet

I have a toolbar that is injected into a template on click. The toolbar also consists of a dropdown, which gets hidden if the user clicks outside the dropdown. To track a click outside the dropdown, I use "$(document).click(function()..." The problem is that the dropdown does not exist on document.ready , what could be improved?
JS
$(document).click(function(){
$('.dropdown').hide();
});
$('.dropdown_name').click(function(){
e.stopPropagation();
$('.dropdown').show();
});

Look for a parent element of the element you want to the click that already exists on the DOM, then use .on on it. Basically what it does is listen for clicks for the descendants, regardless if they're there or not.
$('PARENT_ELEMENT_SELECTOR').on('click','DESCENDANT_SELECTOR',function(e){
//do what you want here
});

You can use the on method on the document like this
$(document).on( "click", ".dropdown_name", function(e) {
e.stopPropagation();
$('.dropdown').show();
});

You could do something like this:
var dropdown = false;
$('.dropdown_name').click(function(){
e.stopPropagation();
$('.dropdown').show();
dropdown = true; // dropdown is now visible
$(document).click(function(){
if(dropdown == true)
$('.dropdown').hide();
dropdown = false; // dropdown is invisible
});
});

Using :not to select all elements except inside box with certain class

I have an overlay that I want to hide on mousedown outside it.
Here is what I tried out but unfortunately :not selector is not working as I expected.
$('body:not(.overlay)').one('mousedown',function(){
//hide overlay here
});
I also tried $('* :not(.overlay)') but same issue.
The overlay gets hidden even when clicking inside the overlay box

$(document).on( "mousedown.hideoverlay", function(e){
if( $(e.target).closest(".overlay").length === 0 ) { //overlay wasn't clicked.
//hide overlay
$(document).off("mousedown.hideoverlay");
}
});

Your selector body:not(.overlay) matches the body element if it doesn't have a class overlay, I'm assuming what you meant was its descendant without the class overlay:
$('body :not(.overlay)'); //note the space - descendant selector
The problem with such an assignment is that it matches too many elements (in particular, parents of selected elements). Tehnically, even clicking on any container div would match the selector, fiddled. This happens because even clicks on elements with overlay class continue propagating up the DOM.
I agree with other suggestions here i.e. it's appropriate to listen to all clicks and do nothing if the selector doesn't match, however preventing event propagation on them could interfere with the rest of the page's logic.
I'd rather advocate an approach where there is an explicit subset of "overlayable" items that could be clicked on - and filter them with :not(.overlay) selector:
$('.some-generic-container-name:not(.overlay)')...

Try the .not() function: http://api.jquery.com/not/ . It specifically removes elements from a selected group which is probably the problem you are getting here. Saves having to do complex if's etc to solve this
$('*').not('.overlay').on('mousedown', function(){
alert("here");
});
Edit
Heh, Didn't read the question fully:
$(document).on('mousedown', function(e){
var target = $(e.target);
if(!target.parents().hasClass('overlay') && !target.hasClass('overlay')){
// hide stuff
}
});
Edit: I prefer to use click here (Dunno why):
$(document).on('click', function(e){
var target = $(e.target);
if(!target.parents().hasClass('overlay') && !target.hasClass('overlay')){
// hide stuff
}
});
It just looks nicer in my opinion, call me weird...