I have a div like the following
<div id="basedata-legend-land" class="legends">
<p class="update_villages_2013">Villages</p>
<p><img src="url" alt="legend" class="update_villages_2013"></p>
<p class="district_boundaries">District Boundaries</p>
<p><img src="url" alt="legend" class="district_boundaries"></p>
</div>
As you can see, i have used the same class name for p element and the img inside the other p element. I want to remove these elements when clicking on a button based on the class name. For that i did something like this
$(`.legends .update_villages_2013`).remove();
This works but when the img is removed, it leaves a empty p element. I want to remove that as well. So basically if i run this code
$(`.legends .update_villages_2013`).remove();
this is how the div should appear
<div id="basedata-legend-land" class="legends">
<p class="district_boundaries">District Boundaries</p>
<p><img src="url" alt="legend" class="district_boundaries"></p>
</div>
I couldn't just use the parentNode property because if i do, it will remove the main div as well.
You can use :has() to select elements that have a matching descendant.
$(`.legends *:has(.update_villages_2013)`).remove();
$(`.legends .update_villages_2013`).remove();
Related
I have the following code
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
and I'm searching of a way to make it like this, using jQuery and CSS attributes matching:
<div id="ad">
<div id="adsensebanner" class="addedclass">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
Any ideas for searching for div that has another parent div and appending a class to the child one?
Your comments on various answers suggest your HTML is invalid and has more than one id="adsensebanner" in it, but just one id="ad" in it.
Your best bet is to make the HTML valid. There can be only one element with id="adsensebanner" in it.
However, if for some reason you want to only target that one element when it's inside id="ad":
document.querySelector("#ad #adsensebanner").classList.add("addedclass");
or with jQuery:
$("#ad #adsensebanner").addClass("addedclass");
That says "Add 'addedclass' to #adsensebanner only if it's inside #ad." There can be valid use-cases (if the one element with id="adsensebanner" may or may not be within #ad and you don't want to add the class if not), but they're rare.
If you correct the HTML to only have one id="adsensebanner", and you always want to add the class, then:
document.getElementById("adsensebanner").classList.add("addedclass");
or with jQuery:
$("#adsensebanner").addClass("addedclass");
In a comment you've said:
The double division check will definately work, however, my second div's ID name varies, so I would like to have it selected via an attr, like div[id*='adsensebanner']. Is there any workaround for this?
Yes, you can use any of the attribute substring selectors. For instance, if the id will always start with adsensebanner (id="adsensebanner1", id="adsensebanner2", etc.), then the selector to use with querySelector or jQuery would be "#ad div[id^=adsensebanner]". (Or you can use the contains one you mentioned, *=, or $= if it always ends with something.)
Try below:
$('#adsensebanner', window.parent.document).addClass("addedclass");
Simple JS can do the trick. And I can't see this div is inside the iFrame.
var p = document.getElementById("ad");
p.querySelector("[id='adsensebanner']").classList.add("addedClass");
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This is only by JavaScript:
document.getElementById("ad").getElementsByTagName("div")[0].classList.add("addedClass");
$( "#ad div:nth-last-child(1)" ).addClass("addedClass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
<div id="ad1">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This will add a class only to div which have parent div id="ad"
<div class="e1">
<p><img alt="" src="/images/site/pr1.png" /></p>
</div>
<div class="e1">
<p><img alt="" src="/images/site/pr2.png" /></p>
</div>
<div class="e1">
<h1> My new h1 </h1>
</div>
How is it possibe to take the content of img src element of the first two div tag which class e1?
Simply use the querySelectorAll method on document. You can then map the returned NodeList to an array of src attributes.
var images = document.querySelectorAll('.e1 img[src]'),
sources = Array.prototype.map.call(images, function(img) {
return img.src;
});
I've used the above selector '.e1 img[src]' to make sure that the returned NodeList only has images with src attributes.
JSFiddle Demo ~ http://jsfiddle.net/u9Lkada3/1/
Don't forget! You need to run the script after the elements exist in the document. The easiest way to ensure this is to put your script at the end, just before the closing </body> tag.
I need to swap the image out when it's moused over. It should be using innerHTML as well I believe.
<body>
anime
ponies
<h1 class="panel">What fandom is better?</h1>
<div class="anime"> <img src="img/anime.png"> </div>
<div class="pony"> <img src="img/pony.png"> </div>
<p id="answer">Choose One</p>
</body>
/**
This is for element changes upon mousesing over of the area
*/`
document.getElementsByClassName("anime")[0].onmouseover=
function(){
orangeBorder1();
mouseAnime();
}
document.getElementsByClassName("pony")[0].onmouseover=
function(){
orangeBorder();
mousePony();
}
function mousePony(){
document.getElementById("pony").src="pony1.png";
}
I don't know if your code is copied wrong but you don't have anything with an id of pony
getElementById will look for a tag with an attribute of id, specify that and your code should work.
id should be unique within the page. You should also give the div a id too instead of querying on the classname
Given this setup, how do I add NEW_CONTENT before the Class1 div by targeting the unique_URL_A?
<div class="Class1">
<div class="Class2">
Link
</div>
</div>
<div class="Class1">
<div class="Class2">
Link
</div>
</div>`
This is what I've tried. But, of course, this adds the content before <a> and not before Class1...
$(".Class1 a[href*='unique url A']").before("<div>NEW_CONTENT</div>");
This is because based on your selector, $(".Class1 a[href*='unique url A']"), the .before() method will of course prepend the content in front of the <a> element. The logic of your original code is therefore:
If <a> element's href attribute matches the unique URL A
And that it is a child of .Class
Then append new content in front of <a>
In order to append the new content in front of the <div> with the class .Class1, you will need to select the element itself instead, for example:
$(".Class1").has("a[href*='unique_URL_A']").before("<div>NEW_CONTENT</div>");
The revised logic will be:
If .Class1 contains the child <a> element whose href attribute matches unique URL A
Append new content in front of .Class1
See fiddle: http://jsfiddle.net/teddyrised/jmovct60/
Seems like $("img").next().hide(); is not working when both the image and div tag are a child of a paragraph.
<p>
<img src="image.jpg" />
<div>text</div> // this div is set to 'display: none' by default in css
</p>
Yet, if I substitute <div> with <span>
<p>
<img src="image.jpg" />
<span>text</span>
</p>
or if I omit the <p> tags
<img src="image.jpg" />
<div>text</div>
the jQuery selector does work properly. Any ideas why this is the case? Is it related to inline and block display? How can I make it work as described in the top code example?
This is the jQuery code I am using:
$(document).ready(function(){
$("img").hover(
function()
{
$(this).next().show();
},
function()
{
$(this).next().hide();
}
);
});
Thanks for your help!
You should not use block element (DIV) inside inline elmenents (P).
Instead of P use DIV with class set like P.
The p element does only allow inline-level elements as child elements. This may be the reason for why your first example does not work.