removing an appended element using javascript/closure? - javascript

I currently have a click event in place that when selected appends a search box to .header, this is done using google closure. My problem now is if I click a close button I want to remove this appended element. I know using jQuery requires only .remove() but Im unsure how to achieve this in closure or vanilla js. Can anyone advise how I can do this?
Current code:
if(goog.dom.getElementsByClass('pe')){
var searchCtn = goog.dom.getElementsByClass('search');
var headerWrapper = goog.dom.getElementByClass('header');
goog.dom.append(headerWrapper,searchCtn);
}
var closeButton = goog.dom.getElement('close');
goog.events.listen(closeButton, goog.events.EventType.CLICK, function() {
console.log('Remove appended');
}, false, this);

The function is this:
goog.dom.removeNode = function(node) {
return node && node.parentNode ? node.parentNode.removeChild(node) : null;
};
So the code is like below(assume the search box is the parent of the close button):
goog.events.listen(closeButton, goog.events.EventType.CLICK, function() {
goog.dom.removeNode(this.parentNode);
}, false, this);

Just use element.removeChild(y)
$(function() {
$('span').click(function() {
this.parentNode.removeChild(this);
});
});
That's jquery, but very easy to translate over to plain old javascript, or whatever framework you are in.

Related

How can I observe changes to my DOM and react to them with jQuery?

I have this function where I toggle a class on click, but also append HTML to an element, still based on that click.
The problem is that now, I'm not listening to any DOM changes at all, so, once I do my first click, yup, my content will be added, but if I click once again - the content gets added again, because as far as this instance of jQuery is aware, the element is not there.
Here's my code:
(function($) {
"use strict";
var closePluginsList = $('#go-back-to-setup-all');
var wrapper = $('.dynamic-container');
$('#install-selected-plugins, #go-back-to-setup-all').on('click', function(event) {
$('.setup-theme-container').toggleClass('plugins-list-enabled');
if ( !wrapper.has('.plugins-container') ){
var markup = generate_plugins_list_markup();
wrapper.append(markup);
} else {
$('.plugins-container').hide();
}
});
//Below here, there's a lot of code that gets put into the markup variable. It's just generating the HTML I'm adding.
})(jQuery);
Someone suggested using data attributes, but I've no idea how to make them work in this situation.
Any ideas?
You could just do something like adding a flag and check for it before adding your markup.
var flag = 0;
$('#install-selected-plugins, #go-back-to-setup-all').on('click', function(event) {
$('.setup-theme-container').toggleClass('plugins-list-enabled');
if ( !wrapper.has('.plugins-container') ){
var markup = generate_plugins_list_markup();
if(flag == 0){
wrapper.append(markup);
flag = 1;
}
} else {
$('.plugins-container').hide();
}
});
If you want to add element once only on click then you should make use of .one() and put logic you want to execute once only in that handler.
Example :
$(document).ready(function(){
$("p").one("click", function(){
//this will get execute once only
$(this).animate({fontSize: "+=6px"});
});
$("p").on("click", function(){
//this get execute multiple times
alert('test');
});
});
html
<p>Click any p element to increase its text size. The event will only trigger once for each p element.</p>

How to call a function with jQuery blur UNLESS clicking on a link?

I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?
You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.
This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});
I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.

Jquery Event onChange for Div

I have a page with the following two divs:
<div id="searchResults">
</div>
<div class="postSearchOptions" style="display: none;">
</div>
Is there any way that I can make the "postSearchOptions" div appear when the "searchResults" div is updated by an AJAX call? I don't control the AJAX calls and I want to detect any change in the "searchResults" div.
I tried writing the following JQuery code, but then realized that it requires Jquery 1.4 and I only have 1.3:
$("#searchResults").live("change", function() {
$(".postSearchOptions").css("display", "inline");
});
Is there any way to catch the event of the searchResults div changing using either standard JavaScript or Jquery 1.3? Thanks!
If the AJAX calls are made using jQuery, you could call handle the global ajaxComplete event and run your code there.
I don't think the onchange event will fire if you are programatically changing the innerHTML. Why don't you just show the Post Search options upon receiving those change i.e. why don't you include it as the last line in your ajax success method.
HTH
You could use setInterval to watch it, but as others have said it would be nicer to detect the change in the ajax callback. Here's an sketch of what a plugin would look like to "watch" a node, like you're trying to do with live:
jQuery.fn.watch = function() {
this.each(function() {
var original = $(this).html();
setInterval(function() {
var newHtml = $(this).html();
if (newHtml != original) {
$(this).trigger('change');
original = newHtml;
}
}, 500);
} );
}
to working, do....
jQuery.fn.watch = function() {
this.each(function() {
var obj = $(this);
var original = $(this).html();
setInterval(function() {
var newHtml = $(obj).html();
if (newHtml != original) {
$(obj).trigger('change');
original = newHtml;
}
}, 500);
} );
}

Why is my jQuery plugin for removing text on focus and re-adding it on blur not working?

I would like the text in the value field of a text box to disappear when that text box gains focus, and then reappear in response to the eventual blur event - but only if the value is empty (that is, if the user hasn't entered anything after putting focus into the text box). So far, I have this:
this.each(function() {
obj = $(this);
var initialText = obj.val();
obj.focus(function () {
if(obj.val() === initialText)
obj.val("");
});
obj.blur(function () {
if(obj.val() ==="")
obj.val(initialText);
});
});
This plugin works if I have only one element in the page.
If I have two elements then it doesn't work. Why would this be?
The obj variable isn't scoped to the function, it's globally scoped, so there will only be one of them -- set to the last one that the plugin is applied to. Use the var keyword to scope the variable to the anonymous function alone so that there will be one for each thing that the plugin is applied to.
You'll want to write your plugin seperate from your code implementation.
Your plugin would look something like this:
(function($) {
$.fn.watermark = function() {
return this.each(function() {
var obj = $(this);
var initialText = obj.val();
obj.focus(function () {
if(obj.val() === initialText)
obj.val("");
});
obj.blur(function () {
if(obj.val() ==="")
obj.val(initialText);
});
});
};
})(jQuery);
Then to use your plugin:
$(document).ready(function() {
$('.watermark').watermark();
});
Additionally as tvanfosson you'll want to include the var keyword on your obj. If you don't have the var keyword on your obj declaration only the last textbox will have the watermark effect.

Update dynamic html attribute

What im trying to do is when the p inherits the class "active" that div.test will print the link rel correctly.
Currently if the page loads without the class assigned to the p tag, it will not. How can I make it happen when the p tag inherits the class "active" the link printed in div.test will get the rel printed correctly?
$(document).ready(function(){
var relvar = $('p.active').attr('rel');
$("div.test").html("<a rel='"+ relvar +"'>hello</a>");
$("p").click(function () {
$(this).toggleClass("active");
});
});
I am not sure what you asking. Are you saying that you would like this code:
var relvar = $('p.active').attr('rel');
$("div.test").html("<a rel='"+ relvar +"'>hello</a>");
To be run whenever the <p> element changes classes? If so, there is no "onchangeclass" event or anything like that, but you could actually create your own event to handle this:
$('p').bind('toggleActive', function() {
if($(this).hasClass('active')) {
var relvar = $(this).attr('rel');
$("div.test").html("<a rel='"+ relvar +"'>hello</a>");
}
}).click(function() {
$(this).toggleClass('active').trigger('toggleActive');
});
Check this code in action.
This is actually kind of roundabout - it would be simplest to just do the logic in the click handler itself. The main advantage of moving it to its own event is that if you then need to do this elsewhere in the code you can keep that logic separate and just "trigger" it as you need.
Not quite sure if this is what you are going for, but can you not handle it in the click code?
$(document).ready(function() {
$('p').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
relvar = $(this).attr('rel');
$('div.test').html("<a rel='" + relvar + "'>hello</a>");
} else {
$('div.test').html("<a>hello</a>");
}
});
});
As far as I know, you will have to bind to some event in order for it to check and see if it needs to update the div.

Categories