I use jQuery most of the time, so I am having a bit of trouble with the following (simple) javascript:
I want to dismiss(hide) the parent element of a p tag when clicking on it:
HTML:
<div class="parent">
<p id="dismiss" onclick="dismiss();">dismiss this box</p>
</div>
JS:
function dismiss(){
document.getElementById('dismiss').pDoc.parentNode.style.display='none';
};
Fiddle: http://jsfiddle.net/CUqmn/3/
But this is not working. What would be the correct code?
Thanks
http://jsfiddle.net/CUqmn/4/
function dismiss(){
document.getElementById('dismiss').parentNode.style.display='none';
};
BTW, as jsfiddle wrap javascript code in loader function, use no wrap in left select box to get it work on jsfiddle.
<div class="parent">
<p id="dismiss" onclick="dismiss(this);">dismiss this box</p>
</div>
function dismiss(el){
el.parentNode.style.display='none';
};
You could try:
HTML:
<div class="parent">
<p id="dismiss" onclick="dismiss(this.parentNode);">dismiss this box</p>
</div>
JS:
function dismiss(delete){
delete.style.display='none';
};
This will delete the parent element. Also I just recently found out that you can hide the parent of a parent element like this:
HTML:
<div class="parent">
<p id="dismiss" onclick="dismiss(this.parentNode);">dismiss this box</p>
</div>
JS:
function dismiss(delete){
delete.parentNode.style.display='none';
};
Not relevant to this but if you ever want to try it it's there.
Sorry for my really late reply. 2 years later lol.
Related
I was wonder how I can toggle one element without toggling others... I just don't want to do this every time:
HTML:
<div class="share-toggle as-1"></div>
<div class="audio-share as1">
<p>Some Text</p>
</div>
<div class="share-toggle as-2"></div>
<div class="audio-share as2">
<p>Some Text</p>
</div>
JS:
$('.as-1').click(function() {
$('.as1').slideToggle('fast');
});
$('.as-2').click(function() {
$('.as2').slideToggle('fast');
});
Is there a way to write this in short? pls help... thx
You can use jQuery to select all elements, which className contains a certain substring:
$('*[class*="as-"]')
This will select all Elements in the DOM (*), of which the className ([class=""]) has "as-" anywhere (*) in it.
And then you can use the Element passed as this to get the number of the element after the "as-" and toggle the wanted element:
$('*[class*="as-"]').click(function () {
let elemNum = this.className.match(/as-(\d+)/)[1];
$("as"+elemNum).slideToggle('fast');
});
I know you already accepted an answer, but anyway…
Here is, in my opinion, a better solution.
Why is that?
Only 3 lines of code, and not using any regex or partial class names…
See comments in my code for more details:
// You could use class^=[as-] to filter on the classes that start with as-,
// (the ^ would be better than a *, because more specific)
// But I suggest you to use the 'share-toggle' class, there's no need to complicate things here:
$('.share-toggle').on('click', function(){
// The following will get the .audio-share element that is after the element we just clicked,
// If your HTML structure is gonna stay well structured like this, it's the finest solution:
$(this).next('.audio-share').slideToggle('fast');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="share-toggle as-1">[ CLICK HERE ]</div>
<div class="audio-share as1">
<p>Some Text</p>
</div>
<div class="share-toggle as-2">[ CLICK HERE ]</div>
<div class="audio-share as2">
<p>Some Text</p>
</div>
I hope you will consider this answer.
And I hope it will help!
This should be pretty simple but I can't make it work. I need the height of an item that is inside the last item with a class.
HTML like so:
<div class="tag" >
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="tag">
<div class="left" id="I need this height !"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
JavaScript poor attempt:
lastLeftHeight = $('.tag').last().$('.left').height();
I know that doesn't work. It's just to show what I'm trying to get .tag items can vary so I can't target a number or an ID.
try this ..
lastLeftHeight=$('.tag:last > .left').height();
you almost had it, but instead of using jquery methods, it can be accomplished with the proper query selector
$(.tag:last .left).height()
this will grab the last .tag element and find every child element with the class .left and return their heights
heres a fiddle demonstrating the selector in action:
http://jsfiddle.net/6e0s4jzj/
I would try some combination of using children(), filter(), and last() to get the height of a particular child div.
http://www.w3schools.com/jquery/jquery_traversing_filtering.asp
This explains a little more about traversing up and down the DOM using jQuery, and with examples that I would think would help.
I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.
I've tried giving the h3 tag a class, then the following:
$('h3.myclass').parent().closest('h1').css('display','none);
and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.
Can anyone help me out?
EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!
Use closest() to traverse up to the grandparent
Use find() to select the desired elements
You can use hide() in place of css('display', 'none') as they are equivalent
var grandparent = $('.myclass').closest('.grandparent');
grandparent.find('h1, .otherstuff').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3 class="myclass">Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I can think of two selectors that might work assuming you put .myclass back in.
$('.myclass').closest('.grandparent').find('h1').css('display','none');
or
$('.myclass').parent().siblings('h1').css('display','none');
have direct control over which is the h3
Try utilizing .parent() , .siblings()
$("h3").parent().siblings().hide(); // `$(".parent").siblings().hide();` ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
You may use:
$('.myclass').closest('.grandparent').find('>h1,>.otherstuff').hide();
> is for direct descendant element.
closest() selects ancestors, what you want is siblings().
So:
$('.your_h3_class').parent().siblings('h1')
will return an array of h1 siblings of the parent div, and in your case the first item of that array is your h1.
And you can iterate through those and hide them (in case there is ever more than one)
If the title is always immediately before the div with the "otherstuff" class, then you could use this:
$('.otherstuff').prev('h1').css('display', 'none');
Documentation here: https://api.jquery.com/prev/
I am trying to clone a DIV to prevent data reputation; this is a frequent thing I want to do over various pages so I don't want to make bug structural changes.
I would like to Clone mApageLeft with the class maContent, and all of its inner div's and content into another div named cloneContent.
I have looked at other examples of Clone, and my attempt does not show anything. Thanks in advance for any help.
<div>
<div>
<div>
<div id="mApageLeft" name="mApageLeft" class="maContent">
<div> header and some text here
</div>
<div> text and image here
</div>
<div> text and another image here
</div>
</div>
</div>
</div>
</div>
<div id="mobileArea">
<div id="mobileMainArea">
headers, links and sme text
<div name="cloneContent" id="cloneContent" class="maContent"></div>
<script>
$(function(){
var $mainAreaClone = $('#mApageLeft').clone();
$('#cloneContent').html($mainAreaClone);
});
</script>
</div>
</div>
Your code works fine when I test it on fiddle. Even after that, if you wanna try something else, you can try append() instead of html() function. Usually when you clone, you want to append the cloned object, you don't want to put is as inner HTML. However, that will also work.
So I have several containers with this markup on a page:
<div class="box w400">
<div class="box-header">
<span class="expand-collapse">expand/collapse</span>
<h3>Heading</h3>
</div>
<div class="box-content">
<p>Some content here...</p>
</div>
</div>
And I am trying to achieve that after clicking on the .expand-collapse span, the .box-content div will slide up or down (toggle).
Here is the jQuery I'm using, I am trying to achieve this with closest():
$(document).ready(function() {
$('.expand-collapse').click(function() {
$(this).closest('.box-content').slideToggle('slow');
});
});
But it is not working for some reason :(
Try this:
$(document).ready(function() {
$('.expand-collapse').click(function() {
$(this).parent().next('.box-content').slideToggle('slow');
});
});
That selects the next sibling of the parent div, it does not make use of closest.
closest() finds the closes parent element. In your case, the span doesn't have any parent elements with class .box-content. why not just do $('.box-content').slideToggle('slow'); ??
edit: i missed the part where you have several of these on a page. the parent().next should work.