In my HTML code I have a div. This div includes some warnings to the users. Warnings are wrapped inside div elements with no ID. If user clicks on close button, it should remove the warning div.
<div id="alarmbox" align="center">
<div>this is warning 1<button onclick="remove_div_of_this_button(this);">x</button></div>
<div>this is warning 2<button onclick="remove_div_of_this_button(this);">x</button></div>
</div>
and this is my JS code:
function remove_div_of_this_button(thisbutton)
{
thisbutton.parentNode.parentNode.removeChild(thisbutton.parentNode);
}
It works fine. However, removing an element is better to be animated instead of sudden remove. If I want to manipulate JS only, how to remove the div with jquery? Is it possible to identify thisbutton in jquery since $(thisbutton) should not work here?
Separate out js from your html and use click event with jquery.
With fadeOut
$(function(){
$('#alarmbox button').click(function () {
$(this).closest('div').fadeOut(1000,function(){
$(this).remove();
});
});
});
Demo
Or try slideUp
Demo2
Like this maybe?
function remove_div_of_this_button(thisbutton)
{
$(thisbutton).parent().fadeOut(function() {
$(this).remove();
});
}
Related
I'm trying to get a fade toggle to work. When you click on (+) two it is supposed to show two links and change to (-) two and when you press again it closes those links and goes back to (+) two. Right now, I can't get anything to happen when you press on the toggle.
<div id="ending">
An everyday snapshot of
<div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs
</div>
<div class="content">
sfs & sfsf
</div>
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).next('.content').slideToggle(450);
e.stopPropagation();
});
});
https://jsfiddle.net/Dar_T/b5tbfn5g/
1) You actually have to reference/include the jQuery library for jQuery functions to work.
2) You had an improper selector.
Rather than $(this).next('.content').slideToggle(450);
just use $('.content').slideToggle(450); or $(this).parent().next('.content').slideToggle(450);
The content div is not a sibling of the toggle div.. so next() isn't going to find it. But if you back up to the parent of the toggle div, then the content div is a sibling, so next() will find it.....
Depending on the rest of the markup, the selector may need to be further altered, but that's the main issue with the function overall.
Seems to work with the selector fixed and the jQuery library actually included.
$(document).ready(function() {
$(".content").hide();
$(".toggle").on("click", function() {
var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
$(".toggle").text(txt);
$(".toggle").toggleClass('active');
$(this).parent().next('.content').slideToggle(450);
e.stopPropagation();
});
});
Updated Fiddle
I have a text bounded by anchor tag. As soon as the user click it, it should toggle between two texts.
I have knowledge on how to toggle a button in JQuery, but don't know how do I implement it with link.
<h1>Questions and Answers</h1>
<p>First Question: What is the capital of Germany?
<br>
<i>Click <b><a id="toggle_this"></a>Here</a></b> to show/hide answer!</i>
</p>
<p>Answer: Berlin.</p>
<script>
$(document).ready(function() {
$("toggle_this").click(function() {
$(this).hide();
});
});
</script>
First change id to class="toggle_this". Then use selector .toggle_this.
Then you can use e.preventDefault() to stop the default action if the link.
Then using closest() and next() you can get the answer <p> then toggle() it.
$(".toggle_this").click(function (e) {
e.preventDefault();
$(this).closest('p').next().toggle();
});
you could do this using jQuery (you can also use plain ol' JS, but it looks like you're using jQuery from before), using the .on method.
Although, I would first recommend you adding a class/id to the answer, so it's a bit cleaner:
$(document).ready(function () {
$('#toggle_this').on('click', function (event) {
event.preventDefault();
$('#answer').toggle();
});
});
EDIT: event.preventDefault() prevents the anchor tag from navigating to the href, and .on registers an event handler, so that the function specified is executed when the event triggers.
First you have a stray closing anchor </a> tag before the 'Here'.
Also i'd give the <p> your trying to hide an id eg. <p id="answer">.
Update the jQuery to this.
$(document).ready(function() {
$("#answer").hide();
$("#toggle_this").click(function() {
$("#answer").toggle();
});
});
Done this a few times before, but something is wrong this time. Trying to create a popup. As you can guess, initially, it's hidden. It does show up on click, but when i try to close it, nothing happens. Also, when i try to change styles to display:none in developer tools, it switches back to display:block. Currently it's in the head section of the page, but i've tried placing it in the very bottom as well.
html of it
<div class="tablecell midlineunit popup-hml middle">
<div class="hml-popup-bg popupbg ">
<div class="hml-popup-cnt">
<div class="closepopup">X</div>
</div>
</div>
</div>
and js of it
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(){
$(this).parent().parent().hide();
});
});
and of course .hml-popup-bg is hidden in css
you can use this .. no need for .each() just use .click() and you can use .closest() instead of parent().parent();
$(".popup-hml").click(function(){
$(this).find(".hml-popup-bg").show();
});
$(".closepopup").click(function(e){
e.stopPropagation();
$(this).closest('.hml-popup-bg').hide();
});
This should work. Its because you close it, but dont stop propagation, so it gets opened again, through bubbling.
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(e){
e.stopPropagation();
$(this).parent().parent().hide();
});
});
https://jsfiddle.net/qcqacbyd/
Your usage of jQuery's .each() seems misplaced. What you really want to set up, I think, are 2 event listeners - one to open the popup when you click a button, another to close it when clicking the "X".
You might accomplish this with the following jQuery:
$(document).on("click", ".popup-hml", function(){
$(".hml-popup-bg").show();
});
$(document).on("click", ".closepopup", function(){
$('.hml-popup-bg').hide();
});
I have a div like this:
<div>
<font class='slideclick'>Click here to slidedown dynamic content</font>
<div class='slidedownonclick'> This is the content that slides down </div>
</div>
Jquery triggers the 'slidedownonclick' to slidedown when 'slideclick' is clicked. This works great but i have and indefinite amount on these div's reccuring in the same webpage, from a mysql database. Giving them unique id's is impossible. Is there any way that i could get only the 'slidedownonclick' in the same div as its respective 'slideclick' to slidedown when it is clicked.
Any help would be much appreciated,
thanks,
This will slide down the next .slidedownonclick div when .slideclick is clicked:
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').slideDown();
});
On a .slideclick handler you will find that sibling with:
$(this).find('+ .slidedownonclick');
or:
$(this).next('.slidedownonclick');
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').animate({
height: '+=50'
}, 1000);
});
Check about jQuery.next(), it's what do you want.
Using it you can get the next sibbling which class/id is the selector.
EDITED:
until jQuery 1.6.4
jQuery(document).delegate('font.slideclick', 'click', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
jQuery 1.7 +
jQuery(document).on('click', 'font.slideclick', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
I have the function:
<script type="text/javascript">
$(function() {
$('#subbutton').click(function() {
$('#subbutton').hide();
});
});
</script>
It simply makes this button hide when clicked:
<a id="subbutton" class="button" href="javascript:TINY.box.show({url: 'follow',width:600,height:170,openjs:'initPopupLogin',opacity:30})"><span>Button</span></a>
Now, if i try to use the identical function, but with a link later on the page, it doesnt work (i have erased the original button at this point) Here is the code:
<div id="subbutton">
<span>Button</span>
</div>
I have tried putting the id in the anchor and in the span, nothing seems to be working for this link. Any idea why this isn't working? (I have deleted the original button so that this second button is a unique id on the page)
Try using .on instead to attach your event handler. I am suspecting the button is not in the dom at the time you attach the event handler.
$(document).on('click', '#subbutton', function() {
$(this).hide();
});
EDIT now that i understand the problem. You are better off giving the buttons a class and using a class selector.
.hide doesn't remove the element from the page so your selector will still be matching on the first element. You need to use .remove to remove the first element from the DOM so the second selector can work.
Also, little jQuery optimization. The nested call to $('#subbutton') is not needed. At best, it is harder to maintain, at worst, it could cause performance issues if you put this in a large loop. This is better.
$(function() {
$('#subbutton').click(function() {
$(this).remove();
});
});
You are missing a " after this:
<a id="subbutton" class="button
and Id has to be unique. Then it should work.
Don't reuse ids, they must be unique. pass the id to the function
Change your javascript to:
$(function() {
$('#subbutton').live("click",function() {
$(this).hide();
});
});
http://jsfiddle.net/W2agx/
also don't reuse id's. use a class for multiple DOM elements that you want to be able to select together.