We Keep Coding

Delete a selected div

Script explanation : I have a text area which user is typing notes and those notes are added to the DOM (as div elements) . I created an icon inside that divs that when you click on it i want the parent of the icon that is clicked to be removed from the DOM . I achieve this with JQuery , but i cant do it in pure JS. The code i use to achieve this in:
$('.fa-window-close').on('click', function(event){
event.preventDefault();
console.log($(this).parents('div')[0]);
$(this).parents('div')[0].remove();
});
Iam posting a link from gist, its a part code of my project so you can understand what iam trying to achieve.
https://gist.github.com/Clickys/43856fe26ee4c061cf910a9211f0c142
Basically what i want to achieve is , lets assume that we have a button that is creating divs elements inside DOM. Each of this div has an icon(fontawesome) that if we click on it , the selected target should be removed from the DOM(the target div) but not the other divs . I tried to use event.target and a lot of things but sadly i couldn't solve this with pure JS.
I tried this
closeTolPos.addEventListener('click', function(e){
var parentEl = e.currentTarget.parentNode.parentNode;
parentEl.removeChild(this.parentElement);
console.log(this.parentElement);
});
But it seems that when there are more than 1 element , it doesnt work . It only works if there is one element.

We make some changes and now the code works:
(function() {
document.addEventListener('click',function(e) {
if (e.target.closest('.notesDecoration')) {
e.target.closest('.notesDecoration').parentNode.removeChild(e.target.parentNode);
}
});
})();
Now click event is binded to a document, so the element exists, when the page is loaded. Then I check if the clicked element was the element, which was recently created and added to DOM.

JQuery not working on inserted/inject DOM element

I am still a bit new to JS & JQuery, so please excuse what may be a simple and stupid question.
Background:
I have a div on my page that holds several divs (#idle-variable). On click of the top level div, it basically shows the other divs (#addvariable). Nothing more than display: none; and .show(). Easy. On another action within that div (change of drop down), I essentially want to inject/insert that top level div (#idle-variable) underneath the first instance.
Issue:
Essentially, the .click function is not working on my newly inserted div. This may be because the two div's share the same ID, BUT I have a sneaky suspicion that it's not recognized in the DOM. A friend of mine said something about I have to "re-run" my jquery in order for it to be readable in the DOM.
Question:
How can i make this work properly? I want to be able to add a dynamic number of these idle-variables to the page and I need to make sure my .click function works for all added DIVS.
$(function(){
$('#idle-variable').click(function(event) {
$("#addvariable").show(400);
});
});
//create variable in db & show value entry
$("#variabletype").change(function() {
$("#varholder").css("display", "inline-block");
$.ajax({
type: "POST",
url: "/myphpfile.php",
data: {"variabletype": $("#variabletype").val()},
success: function(){
$( "#idle-variable" ).after("<div id="#idle-variable>content</div>");
}
});
});

Well to make the code work it would need to use on and ids are only supposed to be on one element. If it can be on the page multiple times you need to use classes.
$(document).on("click,'#idle-variable', function(event) {
$("#addvariable").show(400);
});
you should be using classes
$(document).on("click,'.idle-variable', function(event) {
//$("#addvariable").show(400); //not sure how this relates to the clicked element.
$(this).find(".addvariable").show(400); //if it is a child
});
You also have a typo in your code with quotes.

The ID based selector will be applied to the first element only.
See the example here http://jsfiddle.net/9GN2P/2/
If you are looking to bind same event handler to multiple elements, definitely go with the class based approach, instead of ID based approach.
And, you are expecting event handler to work with dynamically created elements as well. If you are using older versions of jquery, use the live method like
$('yourselector').live('click',function(){
});
Since live is deprecated and if you are in a new version, use the 'on' method
$('containerselector').on('click','yourselector',function(){
});
Editing to answer your comment:
To create dynamic element and append to DOM, you can follow the bellow pattern. Here, I will create a DIV with id "newID", class "newClass", content "NEW DIV!!" and a click event handler for it. And it will be pushed into another div with id 'containerID'
$('<div />',{
id:'newID',
'class':'newClass',
text:'NEW DIV!!',
click:function(){alert('hi');}
})
.appendTo('div#containerID');
This is just a demo.

Add div on top of centered image?

I am using ImageFlow SEE i want to add div on Top of Image once images clicked and Slides into Center.
I tried checking js file but MoveIT() function is called so many times in js and m not able to identify ,
t.wrap('<div class="f1_card"></div>');
when should i write to wrap div around image.
Thanks,

You can use the prepend() function of jquery. You just need to select the image element and then call prepend function. See the example:
$('.target_image').prepend('<div class="f1_card"></div>');
This will be ok if you want to add an element if you want to add prior to an element. But if you want to wrap an element with a div then you have to use wrap() function.
$('.target_image').wrap('<div class="f1_card"></div>');
And obviously you have to put this code above within the click function or similar event you want. see the example:
$('.target_image').on('click', function(){
$(this).prepend('<div class="f1_card"></div>');
});
Here div with class 'f1_card' will be the parent class of your target_image element. Hope this will help you.

If you're using an animation function, perhaps you could try something like this.
$('.myimage').click(function () {
$(this).animate({
/*.do stuff...*/
}, 'slow', function (){
$(this).prepend('<div class="f1_card">my content here</div>');
});
});
This works as follows. When you click your image, it will perform your jquery animation. Once the correct animation has been performed the function will then, at the destination (in this instance, the clicked div) prepend an element. According to the API documentation this will "insert content, specified by the parameter, to the beginning of each element in the set of matched elements."

You could center the div and use z-index in css.

Javascript sibling onclick

This is related to a question I've asked previously: Calling Javascript function after loading an AJAX page
Basically, before all the thumbnails were loaded dynamically into one container called #left_box. Using the script below, I can get it to highlight one div out of all the siblings.
$('.thumbnail_small').live('click', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
However, in order to accommodate a new feature, I had to split the thumbnails into even more containers called .contain. Basically #left_box contains a series of .contain that hold x number of thumbnails. Now when I click on a thumbnail in one .contain, it only affects the siblings within that container rather than the larger container #left_box.
I tried
$('#left_box').on('click', '.thumbnail_small', function(){
$(this)
.css('border-color','#000')
.siblings()
.css('border-color','#ccc');
});
but it doesn't work. Any ideas? Thanks in advance.

I'd suggest repeating your seletor, using the not method to exclude the current element:
$('#left_box').on('click', '.thumbnail_small', function(){
$(this).css('border-color','#000');
$('#left_box .thumbnail_small').not(this).css('border-color','#ccc');
});
This will select all .thumbnail_small inside your #left_box, exclude the clicked one, then applying the css to the rest of them.

How to select an element by distance when it isn't a parent or child

I'm working on editing a tooltip plugin (TooltipsY) to use a div instead of the title element for the content of the tooltip. I'm doing this for a multitude of reasons, the primary one being so I can have HTML in my tooltips without causing validation errors.
The problem I'm having is that when changed the content of the tooltip to be the div instead of the title attribute, every link with a tooltip shows the same tooltip content. That's because The div's aren't related to the links in any way so I can't use "this" to select them.
It would work if I knew some way to change $('div.showtip').html(); to this.closest($('div.showtip').html()); (that method won't work because the div isn't a parent or a child of the link) so how can I make the tooltip content the closest div to the link that's being hovered over?
Here is my example: http://jsfiddle.net/sgCCD/2/
Note: The only thing that should need to be changed is the value of the variable showtip.
Also, I don't want a suggestion for a different tooltip plugin, I'm doing this just as much for my own personal experience as I am to improve the functionality of the plugin.

Hope this is what you're looking for:
http://jsfiddle.net/sgCCD/3/
changed this line:
var showtip = $('div.showtip').html();
to this:
var showtip = $(el).next().html();