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();
});
Related
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?
I need to hide "show replies" when I click to show them. Problem is that when I click "show replies" all "show replies" buttons hides. I need to hide only that the one I click. This is the jQuery code:
$(".replies_show").click (function(e){
$(".replies_show").replaceWith(" ");
$(this).next(".replies").show();
e.preventDefault();
});
$(".replies_show") selects all elements having the class, therefore you are selecting all of them and then applying replaceWith to all of them again. However, this inside that call back function refers to the element that just clicked (i.e. the only clicked element not all of them).
Also, do not use replaceWith function just to hide an element, use .hide() instead.
So, replace
$(".replies_show").replaceWith(" ");
With
$(this).hide();
You can use this to get the current element. Otherwise, you're selecting all the elements with the .replies_show class.
$('.replies_show').on('click', function(e, el) {
$(el).replaceWith(' '); // Does what you're looking for
$(el).hide(); // Might be better, depending on what you're doing
$(this).next('.replies').show();
e.preventDefault();
});
Use .hide() function not .replaceWith()
$(".replies_show").click (function(e){
$(this).hide();
$(this).next(".replies").show();
e.preventDefault();
});
As you need target only clicked item, so you need to use $(this) in callback function, something like below:
$(".replies_show").click (function(e){
var $this = $(this); // cache $(this)/clicked element
$this.hide(); // clicked item will be hide (display: none)
$this.next(".replies") // next matched item of clicked item
.show();
e.preventDefault();
});
I'm trying to figure out how to iterate over the elements in one div on an onclick event inside the div without also iterating over another div with the same.
My Previous Javascript Method
$(document).on('click', '.ddSubmit', function() {
$("input[name*='ddText']").each(function() {
$("select[name*='ddFinal']").append('<option>'+$(this).val()+'</option>');
});
});
The problem in the previous example was that if I had input fields in separate divs it would iterate over every input field in all divs
My Current Javascript Method:
$(document).on('click', '.ddSubmit', function() {
$(this).next('.ddP').children('.ddText').each(function() {
$("select[name*='ddFinal']").append('<option>'+$(this).val()+'</option>');
});
});
This is the solution I came up with but it is not appending to the select element am I going about this the wrong way or is there something I'm missing
edit: Here's the fiddle I'm working on http://jsfiddle.net/me74Z/20/
Close with the first method, just use a preserved instance of this and you'll be all set:
$(document).on('click', '.ddSubmit', function() {
var that = this;
$("input[name*='ddText']", that).each(function() {
$("select[name*='ddFinal']", that).append('<option>'+this.value+'</option>');
});
});
Here is the solution I came up with to my question after working on it for a while
$(this).parent().find('>p.ddP>input[name="ddText"]').each(function() {
$("select[name*='ddFinal']").append('<option>'+$(this).val()+'</option>');
});
I went through the parent div in the debugger and traced the path to the input text elements
I have a button and when it is clicked it should add a class to the HTML element, but then when the .class is clicked, it isn't detected.
This is the use case:
Click button - "testerclass" will be added to HTML element
Click "testerclass" - removes that class from that element
The detection for when "testerclass" is clicked only seems to work when the class exists before the page load, not when I add the class manually after load. Is this something to do with the problem?
I have tried to recreate the problem on jsfiddle, but I can't recreate the use case where the class is already added to the HTML element, as I can't edit that on jsfiddle.
But here is jsfiddle one, In this one you can see that the buttonone adds a class to HTML, but the detection for clicks on .testerclass never come through.
And here is jsfiddle two. In this one, I have changed the .testerclass selector to html, and this shows that HTML clicks are bubbling through (which I was unsure of when I first hit this problem).
And offline I created a third testcase where the HTML element already had the testerclass, and it detected the clicks sent through to it.
$(document).ready(function() {
$('button.1').click(function() {
$('html').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
});
$('.testerclass').click(function() {
$('.test').append('testerclass clicked and removed<br />');
$('html').removeClass('testerclass');
});
});
Edit: I also tried doing this with a slightly different method of:
$('html').click(function() {
if(this).hasClass('testerclass') {
//do stuff
}
});
but that didn’t work either.
Since the testerclass is dynamic, you need to use event delegation to handle events based on that. Which will require us to register the event handler to the document object that causes another problem because the click event from the button will get propagated to the document object which will trigger the testerclass click handler as well. To prevent this from happening you can stop the event propagation from the button.
$(document).ready(function () {
$('button.1').click(function (e) {
e.stopPropagation();
$('html').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
});
$(document).on('click', '.testerclass', function () {
$('.test').append('testerclass clicked and removed<br />');
$('html').removeClass('testerclass');
});
});
Demo: Fiddle
You need to stop the propagation to the html so the other click handler does not pick it up.
$('button.1').on("click", function(evt) {
$('html').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
evt.stopPropagation();
});
$(document).on("click", function() {
$('.test').append('testerclass clicked and removed<br />');
$('html').removeClass('testerclass');
});
Other option would be to add one event handler and use the event target to see if it is the button or not and change the content that way.
$(document).on("click", function (evt) {
var isButton = $(evt.target).is(".btn");
var message = isButton ? '<p>"testerclass" added to html</p>' : '<p>"testerclass" clicked and removed</p>'
$('html').toggleClass('testerclass', isButton);
$(".test").append(message);
});
JSFiddle: http://jsfiddle.net/69scv/
here's a neat way to do it
$('html').on('click', function(e) {
var state = !!$(e.target).closest('button.1').length;
var msg = state ? 'class added' : 'class removed';
$(this).toggleClass('testerclass', state);
$('.test').append(msg + '<br>');
});
FIDDLE
You add a class to html element, so when this class is clicked, it means the html element is click. Now the problem is when you click any where in page, it will remove this class away from html! Let try add this class to body element instead.
$(document).ready(function() {
$('button.1').click(function() {
$('body').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
});
$('.testerclass').click(function() {
$('.test').append('testerclass clicked and removed<br />');
$('body').removeClass('testerclass');
});
});
And now you can check it:
$('html').click(function() {
if(this).hasClass('testerclass') {
//do stuff
}
});
So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.
This is the dropdown code:
function dropdown(){
$('#smenubutton').click(function(e){
var submenu = $(this).find('.submenu');
if (submenu.is(':visible')){
submenu.hide();
}else{
submenu.show();
}
});
}
however, a code like this:
$(document).click(function(e){
e.stopPropagation();
$('.submenu').hide();
});
will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can't find any questions based on my needs) and close this question.
You should check if e.target is the submenu and hide the submenu only if it's not (in this case i check if it has the class submenu)
$(document).click(function(e){
if($(e.target).hasClass("submenu")){
$('.submenu').hide();
}
});
Since you mentioned "outside the browser", try this: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
EDIT: Since OP edited the question, I'll edit the answer:
$(document).on('click', '#submenu', function(e) {
e.stopPropagation();
// show or hide the submenu here
});
$(document).on('click', function(e) {
// hide submenu here
});
example: http://jsfiddle.net/A3SfP/
Try on blur() or focusout():
$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });
If it doesn't work try giving your menu an explicit tabindex.