I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript
If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();
Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>
Related
I have a div class which is essentially a button that I'm trying to click using jQuery
<div class="tool-button refresh-button icon-tool-button" title="Refresh"><div class="button-outer"><span class="button-inner"><i class="fa fa-refresh text-blue"></i> </span></div></div>
Here is what I tried but the log confirms the length is 0 thus not selected, any suggestions?:
console.log($('.div.tool-button .refresh-button icon-tool-button:first'))
console.log($('.div.tool-button .refresh-button icon-tool-button'))
You had multiple problems with the selector.
Remove . before div since its a tag not a class.
Remove the spaces between the classes, when there is space between them jquery is looking for element thats a child to the previous selector.
console.log($('div.tool-button.refresh-button.icon-tool-button:first').length);
console.log($('div.tool-button.refresh-button.icon-tool-button').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tool-button refresh-button icon-tool-button" title="Refresh">
</div>
In your solutions, you trying to get:
<div class="tool-button">
<div class="refresh-button">
<div class="icon-tool-button"> // this
</div>
</div>
</div>
If you delete spaces on string, you can access your element.
The solution is
$(".tool-button.refresh-button.icon-tool-button")
Chaining selectors will query for elements that contain all of the selectors.
Detailed answer: https://stackoverflow.com/a/59406548/11969749
You can use click() method
const btn = $(".tool-button.refresh-button.icon-tool-button");
btn.click();
Do you want to select first element?
const btn = $(".tool-button.refresh-button.icon-tool-button")[0];
btn.click();
In JavaScript I want to use document.querySelector to "grab" the last div (<div class="widget-footer">) in below HTML. However after many tries, I still can't figure out the correct CSS selector syntax to use.
The following code does not work:
document.querySelector (".skin-grid-widgets.ui-sortable.gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1.widget-footer")
Here is the HTML I am working with
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>
I've surfed everywhere to find example of complex CSS selectors used with querySelector, but to no avail. Any help would be really appreciated.
Your issue is you need a space in between each child element you are trying to select. If you do not have spaces in between your class selectors, by CSS specification, it will look for both classes on the same element.
Change your selector to look like the following:
var footer = document.querySelector(".skin-grid-widgets.ui-sortable .gridWidgetTemplatePositie.AgendaStandaard.disablesorting.hoogte-1-knoppen-0.breedte-1 .widget-footer");
footer.classList.add("highlight");
.highlight {
background-color: yellow;
}
<div class="skin-grid enkeleKolom" id="Infobalk">
<div class="skin-grid-widgets ui-sortable">
<div class="gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1">
<div class="widget-header">
here comes the header text
</div>
<div class="widget-body">
some body text
</div>
<div class="widget-footer">
here comes the footer text
</div>
</div>
</div>
</div>
try this:
<script>
document.querySelector (".skin-grid-widgets .gridWidgetTemplatePositie .widget-footer");
</script>
You don't need to add adjacent classes like "skin-grid-widgets ui-sortable" in querySelector, if you do so then query selector assumes that "skin-grid-widgets" is parent of "ui-sortable". Use just one of the classes at one DOM level.
The selector ain't complex, your thoughts are.
Listen to yourself, to the description you provide of what you want to select:
"grab" the last div in below HTML
Not grab the node with the class widget-footer inside of a node that has all these classes: gridWidgetTemplatePositie AgendaStandaard disablesorting hoogte-1-knoppen-0 breedte-1, inside a node ...
//a utility, because DRY.
//and because it's nicer to work with Arrays than with NodeLists or HTMLCollections.
function $$(selector, ctx=document){
return Array.from(ctx.querySelectorAll(selector));
}
//and the last div in this document:
var target = $$('div').pop();
or
"grab" <div class="widget-footer"> in below HTML
var target = document.querySelector("div.widget-footer");
or the combination: grab the last div.widget-footer in the HTML
var target = $$('div.widget-footer').pop();
I want to hide the span closest to the button clicked and also hide the button.
The html goes like this
<!-- the div will be looped using php -->
<!-- this will only be a general idea of the code as the actual is very long and messy -->
<div>
<form><!-- This is like the head section -->
<div>
<div> <!-- some divs -->
<button class="btn"></button> <!-- where i want it to work -->
<div></div><!-- make this 5 times -->
<span>content to hide</span>
</div>
</div>
</form>
<div><!-- Comments to the head are here -->
<button class="btn"></button><!-- button where it works -->
<span>contains the comments</span>
</div>
</div>
Script
$('.btn').click(function(){
$(this).hide();
$(this).next("span").hide();
});
I've tried the following below:
1. $(this).next("span").hide();
2. $(this).closest("span").hide();
It only works if I call all the span elements.
EDIT: the span is quite far as there are other elements like 5-10 elements before we reach the span.
This is what you need: JSFiddle
$(this).nextAll("span").first().hide();
nextAll() will look at all the next siblings (rather than just the first next one), and then we only want the first span that is found... first() achieves that
also, closest() will not work as it is looking up the tree, not at siblings.
EDIT 2: this answer selects the first siblings span, not the first sibling span after the button. The answer above using $(this).nextAll('span').first().hide() is the best answer.
$('.btn').click(function(){
$(this).hide();
$(this).siblings("span").first().hide();
});
closest() looks up the DOM tree, find() looks down, and siblings() is what you're looking for.
Edit 1: added first() after siblings() to only select the first one
you can try this way:
$('.btn').click(function(){
var _that=$(this)
_that.hide();
_that.parent().find('*').eq(_that.index()+2).hide();
});
https://jsfiddle.net/3z5oyc4n/
+2 is for each element after your .btn (+1 = div, +2 = span)
I want to move an existing div which is inside another one to the body of HTML.
For example i have:
<body><div1><div2>blah</div2></div1></body>
I would like it to make:
<body><div1></div1><div2>blah</div2></body>
Any suggestions?
Give your divs some IDs:
<body>
<div id="one">
<div id="two">
</div>
</div>
</body>
Then use appendTo
$('#two').appendTo('body');
$('div2').appendTo('body');
(you'll have to change div2 to a proper selector of course)
use some combination of remove and append to achieve ur out put.
jQuery Remove Method
jQuery Append Method
I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!
Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.
You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});