If I have a few divs like below, is it possible to remove or hide the divs that have images in them (I don't want to use something like nth-child in case another image is added in the future)
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"</div>
<div>Test 1</div>
<div>Test 1</div>
One of the great things about jQuery is it's set-based. So: You find the set of imgs directly contained by divs via $() with a child combinator selector div > img, then find each of those img's parent via parent, and remove them via remove:
$("div > img").parent().remove();
Example (with two divs with imgs, just to demonstrate that the above doesn't just handle a single one):
$("div > img").parent().remove();
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<div><img src="Image.jpg"></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to handle the img being anywhere within the div, not just as a child, just use a div img selector and closest:
$("div img").closest("div").remove();
Example:
$("div img").closest("div").remove();
<div>Test 1</div>
<div>Test 1</div>
<div>Test 1</div>
<!-- Note the added span to demonstrate finding a non-child img -->
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<div><span><img src="Image.jpg"></span></div>
<div>Test 1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$('div').each(function() { // for each div
var $this = $(this);
if($this.find('img').length) // if the div has images as descendants
$this.remove(); // remove it
});
Note: If you're looking for divs that has images as direct children then replace .find with .children.
Related
If I had HTML content like this:
<div id="my1">
<div id="1">This is div 1</div>
<div id="2">This is div 2</div>
<div id="3">This is div 3</div>
<div id="4">This is div 4</div>
<div id="5">This is div 5</div>
</div>
How can I append an HTML string returned from an XHR request that comes in like this:
<div class="cA cB cC" data-type"a">
<div>Success Message Here<div>
<div class="cL">Undo</div>
</div>
So the end result is:
<div id="my1">
<div id="1">This is div 1</div>
<div id="2">This is div 2</div>
<div id="3">This is div 3</div>
<div id="4">This is div 4</div>
<div id="5">This is div 5</div>
<div class="cA cB cC" data-type"a">
<div>Success Message Here<div>
<div class="cL">Undo</div>
</div>
</div>
The thing is, I don't want to do document.createElement(div).appendChild() since it already comes formatted with classes and data attributes.
Is there a way to simply add this HTML to where I need it?
You can append to the div's innerHTML. Assuming your content to add is stored in a variable called html:
document.getElementById('my1').innerHTML += html
First of all you have to make sure that data is safe to insert it directly to prevent XSS.
Then you can use method called insertAdjacentHTML:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
You can choose place to insert your raw HTML
element.insertAdjacentHTML('beforeend', rawHtml)
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 3 years ago.
I am selecting some elements using jQuery and applying CSS like this...
$(".items div").not(".active").css({"color":"green","background":"red","z-index:":"-9"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items">
<div>Item 1</div>
<div class="active">Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>
The background and the color both work, but the z-index is not being applied.
Where am I going wrong?
If you don't style the element with the position property (relative, absolute, fixed), the element will remain in the normal document flow as a block or inline element. Elements in the normal document flow can't be layered with z-index.
You have an extra colon in your jQuery when setting z-index.
Should be
$(".items div").not(".active").css({"color":"green","background":"red","z-index":"-9"});
It seems like Electron won't allow selectors such as :first-child and :nth-child.
For example, for the following HTML:
<div class="tabs" id="first">Block 1</div>
<div class="tabs" id="second">Block 2</div>
<div class="tabs" id="third">Block 3</div>
And the following CSS:
.tabs:first-child {
display: none;
}
Electron would just not execute the CSS, therefore the first <div> would still appear.
How can I solve this?
Thanks!
you can wrap your divs inside a parent like this
<div>
<div class="tabs" id="first">Block 1</div>
<div class="tabs" id="second">Block 2</div>
<div class="tabs" id="third">Block 3</div>
</div>
now first-child will work.tested and working
i think reason is now first one is first child of it's parent
I have the following html and I want to change the divs around onclick. For example:
Initial
<div class="box1">Story 1</div>
<div class="box2">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
When I click on Story 2, it becomes
<div class="box2">Story 1</div>
<div class="box1">Story 2</div>
<div class="box2">Story 3</div>
<div class="box2">Story 4</div>
So .. whichever div is clicked will take the property of box1 and the others will become box2. Is it possible?
One more possible solution with toggleClass() method:
$("div").on("click", function() {
$(this)
.siblings(".box1")
.andSelf()
.toggleClass("box1 box2");
});
DEMO: http://jsfiddle.net/x8vxh/
Something like this perhaps:
$('.box1, .box2').click(function() {
$('.box1').addClass('box2').removeClass('box1');
$(this).addClass('box1').removeClass('box2');
});
It might be neater to have one box class for all boxes, and one active class that you add and remove, and the latter class could override the properties of the former. Would save you the trouble of toggling two different classes.
Try this
$("div").on("click",function(){
$(".box1").prop("class","box2");
$(this).prop("class","box1");
});
http://jsbin.com/igugop/3/edit
Suppose I have 4 visible divs:
- 2 on top
- 2 on the bottom, wrapped in a container
and 1 hidden div.
When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.
When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.
I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.
So there are the questions:
- Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?
- What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?
Code example here: http://jsfiddle.net/Xq9kr
You can create implicit links through structure.
For example with this HTML:
<div class="top">
<div>Div 1</div>
<div>Div 2</div>
</div>
<div class="bottom">
<div>Div 1</div>
<div>Div 2</div>
</div>
You can then select the respective div in the top via indices:
$('div.bottom > div').hover(function () {
var index = $(this).toggleClass('highlight').index();
$('div.top > div').eq(index).toggleClass('highlight');
});
Or you can create explicit links through data attributes and IDs.
<div class="top">
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</div>
<div class="bottom">
<div data-for="div2">Div 2</div>
<div data-for="div1">Div 1</div>
</div>
Then select like this:
$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');