A lot of .cell elements are added to the DOM on document load. Only some of them are needed. If an <img> was also created within them, they are needed. If an <img> element was not created within the .cell elements, then delete the whole .cell element. If the <img> was created then do nothing.
How can I do that?
<div class="cell">
<div class="a-class">
<div class="always-generated-div"></div>
<img> <!-- if generated --->
</div>
</div>
jq(".cell img").each(function() {
if (jq(this).length > 0) {
console.log("Oh There You Are");
} else {
console.log("Empty elements erased");
jq( ".cell" ).remove();
}
});
You can select a parent by their child elements using the :has() selector (and the :not() selector in this case too). From there, you can remove() them. Try this:
$('.cell:not(:has(img))').remove();
Working example
You can use :empty selector
Select all elements that have no children (including text nodes).
jq(".cell:empty").remove()
Related
I'm just wondering if an element with display: none should have a length of 1 in JavaScript. I though display: none was like removing an element from the document and the known universe.
e.g.
$('.element').hide(); // jQuery sets to display: none;
console.log($('element').length); // returns 1
The display:none property is just use to hide the element, it will not remove the element form the DOM.
If you open the console and look into the Elements tab you will still see the element with display:none.
If you want to remove the element then you could use javascript to remove it from DOM.
Example
let elem = document.querySelector(`<css selector>`);
elem.remove();
All that display: none does is it changes the CSS style property of the element. The element still exists in the document, so it's still possible to select it with jQuery or a DOM method. Eg, both
<body>
<div>foo</div>
</body>
and
<body>
<div style="display: none">foo</div>
</body>
exist in the document.
If you want to actually remove the element from the DOM, use .remove() (in both jQuery and built-in JS):
$('.element').remove();
or
document.querySelector('.element').remove();
Both of those will result in the DOM changing from
<body>
<div class="element">foo</div>
</body>
to
<body>
</body>
One more thing is when you use the
$('.element').remove();
or
document.querySelector('.element').remove();
be aware that: The remove() method removes the selected elements, including all text and child nodes.
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
How do I append .div4 to .div1 onLy on its parent container without it also appends to the next container with the same div? I tried the basic jQuery appendTo but this sets .div4 on all the .div1 elements in my DOM.
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
Update: changed invalid HTML. Using this script now (replace dummy divs with my actual divs):
var $this = $('span.conditionHilite.refurbHilite');
$this.appendTo($this.closest('.itembox.centerbox.col.span_1_of_3').find('.image.col1'));
Problem now is that if my page consist of more then one container with"span.conditionHilite.refurbHilite" it will append the total amount of these elements inside each parentcontainer instead of just the one.
If you tried to append an element to more than one target element with jQuery, it will clone that element however many times is required. If you only want to append .div4 to the .div1 element within its same container element, you'll need to explicitly select that element. Something like this:
var $this = $('.div4');
$this.appendTo($this.closest('.container').find('.div1'));
That uses .closest() to traverse up the DOM tree to find the containing element, then .find() to look within that containing element for the .div1 element. With your current DOM structure that will only ever be a single element, so the .div4 element is simply moved, without any clones being created.
Note: As Rory McCrossan pointed out, you're re-using IDs in your HTML and it is therefore invalid. I've used a class selector in the code above on the assumption that you'll fix your invalid HTML by switching from id="container" to class="container". If - as stated in the comments - you absolutely can't change that, then the '[id="container"]' selector should work instead.
I need to write a piece of code (I am thinking of JavaScript/jQuery) that would hide the two divs highlighted. The problem is that they do not have IDs and they belong to classes but are not the only objects in those classes. So I cannot hide the classes, because that will hide more things that I want. The "parent" div has an ID.
Please find the code here:
Is there any way I can reference the divs that I want to hide by the order number from the parent? Any other solution would be greatly appreciated.
As I see that those elements are sub child of an element with an id of #view so you can make use of nth- selectors or you can use jQuery :eq()
$("#view > div:nth-of-type(3) > div:nth-of-type(2),
#view > div:nth-of-type(4) > div:nth-of-type(1)").hide()
Or using CSS (Recommended)
#view > div:nth-of-type(3) > div:nth-of-type(2),
#view > div:nth-of-type(4) > div:nth-of-type(1) {
display: none;
}
Here, the first selector i.e #view > div:nth-of-type(3) > div:nth-of-type(2) selects a third div element which is a direct child to an element having an id of #view and further it selects a direct div element which is a second child of that type
Second selector i.e #view > div:nth-of-type(4) > div:nth-of-type(1) selects fourth direct div child element to an element having an id of #view and further, it selects first direct child div
This worked for me If there is no other sibling with same class name.
HTML
<div>
<div class="child"></div>
</div>
<div id="parent">
<div class="child">
</div>
</div>
<button onclick="hideDivs()">Hide</button>
Javascript
function hideDivs() {
var parentDiv = document.getElementById('parent');
var childDivs = parentDiv.getElementsByClassName('child');
for (var i = 0; i < childDivs.length; i++) {
childDivs[i].style.display = "none";
};
}
I am not a fan of coding by position (e.g. the 3rd or 4th element) because relatively minor changes to the markup such as just adding a new div for spacing can break code that relies on specific hard-coded positions.
If you want something that won't break when there are changes to the markup that might change the relative position of items, then you have to look for more specific content that you want to hide. There are many different ways to do this depending upon what you know about the content and what is the best marker to indicate that you have the right div.
Here's one way that looks for unique identifiers in the content you want to hide, then goes up to the proper parent to hide that content:
$("#RoleListTB").closet(".h1r1").hide();
$("#AccessProfileListTB").closest(".h111").hide();
You could use the table's ids to identify the container.
$("#RoleListTB").closest(".hlrl").hide();
closest() is looking up the DOM to the next matching parent, so you can start at your table as shown.
i've made a fiddle for this:
<a href="#" id="toggle" >show/hide</a>
<div>
<div class="hlrl">
<span id="RoleListTB">
RoleList Table
</span>
</div>
</div>
$("#toggle").click(function(){
$("#RoleListTB").closest(".hlrl").toggle();
});
http://jsfiddle.net/NGVQ3/
You could easily do this by using a CSS pseudo-selector in your query.
$('#view').find('div.h1r1:nth-of-type(2)')
or you could just be more specific
.h111+.h1r1
You can use :gt Jquery selector to search by index:
$( ".some:gt(0)" );
0 - is first .some
You can use the :eq selector to select an element at a particular index.
Assume the parent div has an id parent
it had child div's having the class sub.
so if you want to hide the second child element
$("#parent .sub:eq(1)").hide();
since the child ordering starts with `0' index
If you are sure that their positions are fixed and that won't change, then you could use nth-child selector.
Something like this:
$("#view").children("div:nth-child(3)").children("div:nth-child(2)").hide();
$("#view").children("div:nth-child(4)").children("div:nth-child(1)").hide();
Or, just:
$("#view > div:nth-child(3) > div:nth-child(2)").hide();
$("#view > div:nth-child(4) > div:nth-child(1)").hide();
Alternatively, using .eq:
$("#view").children("div").eq(2).children("div").eq(1).hide();
$("#view").children("div").eq(3).children("div").eq(0).hide();
Note: .eq is zero-based.
Divs can have more than one class . . .
<div class="h111">
changed to
<div class="h111 hideDiv">
CSS
.hideDiv {display: none;}
then use javascript to show it when you want it to be shown :)
Your div contains the tables which have a ID. So you can use
$('#yourTableIDHere').parent().hide();
This code will hide your div.
Using a jQuery selector, is it possible to select all elements that are not a descendant of the elements from another selector.
For example, I would like to select all the a tags that are not a descendant of a th tag. The only way I can see to do it right now is as follows:
$('a').filter(function () {
return $(this).closest('th').size() == 0
})
Assuming you are looking for descendants (since having a a element as a sibling to th elements is not valid HTML) you can use the :not pseudo-selector to do this:
$('a:not(th a)');
This should be pretty fast in modern browsers using document.querySelectorAll, but might be slower than the original for older versions of IE.
See a simple demo here: http://jsfiddle.net/JR5sP/
Assuming that you do want to do as your question asks (regardless of the invalid HTML fact) and filter out elements with a specific sibling,
You can do this:
$('a').filter(function() {
return $(this).siblings('b').length == 0;
}).css('color', 'orange');
HTML:
<div>
<b>Hello there</b>
<a>Don't select me!</a>
</div>
<div>
<a>Select me!</a>
<a>Select me too!</a>
</div>
See http://jsfiddle.net/JR5sP/1/