I'm using this code for removing empty iframes but I dont't know where I'm failing:
<body>
<section class="fu-banner-ad-list">
<div class="fu-wfb-wrapper">
<div class="mdl-cell mdl-cell--2-col ">
<div class="adunit fu-banner-wfb " data-adunit="XXX_YYY42 " data-dimensions="150x50 ">
</div>
</div>
</div>
....more iframes
</section>
<script type="text/javascript">
if ($('.mdl-cell--2-col').is(':empty')) {
$('.mdl-cell--2-col').remove();
}
</script>
</body>
Can you try $('.mdl-cell--2-col').empty()?
more info here
Related
Will you please tell me that how i hide mother .secondchild if parent has child class.
Here is the code
HTML code
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
Here is my script but not working
if ($(".parent").hasClass("child")) {
$('.mother .secondchild').hide()
}
since your parent div has no class called child, your script won't give the desired output.
try this
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
DEMO HERE
EDIT
Based on OP's Comment hidden the div in the button click.
Html
<button id="btnClick">
Click Me
</button>
JS
$('body').on('click','#btnClick','',function(){
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
});
UPDATED DEMO
$(function(){
$("body").on("click",".click",function(){
if ($(".parent ").children("div.child")) {
$('.mother .secondchild').hide()
}
})
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
<button class="click">
button
</button>
</body>
</html>
Do this work without any if condition
$(".parent:has(.child)").next().find(".secondchild").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
You just change "hasclass" to "has", then it works.
if($('.parent').has('.child')){
$('.mother .secondchild').hide();
}
I want to extract the text of the div on hover but so far I getting the text of all the divs.
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I tried using the following command :
$('.a').on('hover').text();
Any suggestions?
To get the first div only, target a:first then get the text of that element using this
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
Try this code
$('.a:first').on('mouseenter', function() {
alert( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
You can use the below code to get the text of the hovered div.
$('.a').on('mouseenter', function() {
console.log( $(this).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='parent'>
<div class='a'>a</div>
<div class='a'>b</div>
<div class='a'>c</div>
<div class='a'>d</div>
<div class='a'>e</div>
</div>
I want to remove all div elements with class facebook, twitter, LinkedIn, googlePlus who has parent id show-share-count
How to do this?
$("div").remove(".facebook");
$("div").remove(".twitter");
$("div").remove(".linkedIn");
$("div").remove(".googlePlus");
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
you can do this just only one line in script section.
<script>
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus").remove();
</script>
Just use following script for this
$('#show-share-count .facebook, #show-share-count .twitter, #show-share-count .linkedIn, #show-share-count .googlePlus, #show-share-count .share-count').remove();
or you can use .children()..
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove();
Do like this .children() .They will find the children element of the show-share-count
$("#show-share-count").children(".facebook , .twitter , .linkedIn, .googlePlus").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-share-count">
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
<br /><br />
<div class="facebook">Facebook</div>
<div class="twitter">Twitter</div>
<div class="linkedIn">LinkedIn</div>
<div class="googlePlus">Google Plus</div>
<div class="share-count">Total Count</div>
</div>
This is how you can do it:
$("button").click(function() {
$("#show-share-count").find(".facebook, .twitter, .linkedIn, .googlePlus, .share-count").remove();
});
Here is the JSFiddle demo
You can try to use .empty from Jquery if you want to empty the whole div
https://api.jquery.com/empty/
or
$("#show-share-count .facebook").remove()
if you want to remove a specific div
You can use below also:
$('#show-share-count .facebook,.twitter,.linkedIn,.googlePlus,.share-count').remove();
I want to trigger the below function on the mouse down event on the class yeti. However,this does not seem to work.
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//This code will run after your page loads
$('body').on('mousedown', '.yeti', function(event) {
alert("Yaaaarrrr!");
});
});
</script>
</body>
Your code is correct and should work (I just tested with jQuery 2). Make sure to put something inside the yeti div or make it a fixed size (width and height).
Now it will work perfectlly..:)
<body>
<div class="gameholder">
<div class="title"></div>
<div class="penguin1"></div>
<div class="penguin2"></div>
<div class="penguin3"></div>
<div class="penguin4"></div>
<div class="penguin5"></div>
<div class="penguin6"></div>
<div class="penguin7"></div>
<div class="penguin8"></div>
<div class="yeti"></div>
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".yeti").mousedown(function(){
alert("yeti pressed");
});
});
});
</script>
</body>
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.