Question correction:
I am trying to hide the entire 'li' block if the ptag inside of the 'li' is empty.
The p tag resides inside of the 'li' in a div with the class of
aaProfileDataWrapper
So if that p tag has no text inside of it then the entire 'li' need to hide including the labels and anything else it holds.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var div = $(this);
if (div.next().html() === "<p></p>") {
div.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
All you need to do is query for al the p elements within any div element that has the aaProfileDataWrapper class that, themselves, are children of a li element. Then, you can loop over those p elements and, if they are empty, hide the li ancestor.
// Loop over all the p elements within the div elements that
// have the right class, that are inside of li elements
$("li div.aaProfileDataWrapper p").each(function (idx, el) {
// Check the p to see if it's empty
if ($(el).html() === "") {
$(el).closest("li").hide(); // Hide the nearest li ancestor
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="aaProfilePhone">
<label>Office 1 Phone:</label>
<div class="aaProfileDataWrapper">
<p></p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
<li id="aaProfilePhone">
<label>Office 2 Phone:</label>
<div class="aaProfileDataWrapper">
<p>something</p>
</div>
<div class="aaInlineValidationWrapper">
<div class="aaValidationWrapper-Inner">
<span class="aaInlineValidationIcon"></span>
<span class="aaValidationTxt"></span>
</div>
</div>
</li>
</ul>
Plain old JavaScript to the rescue. Pleas let me know if there is any doubt.
const divs = document.getElementsByClassName('some-class');
Array.from(divs).forEach((div) => {
const p = div.querySelector('p');
if (p && !p.innerText) {
div.style.display = 'none';
} else {
div.style.display = null;
}
});
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
<div class='some-class'>
<p></p>
Hide
</div>
<div class='some-class'>
<p>Show</p>
</div>
You can use find() to search for a <p> and then use text().length to see if it's empty.
var divs = $(".aaProfileDataWrapper");
divs.each(function () {
var p = $(this).find("p")
if (!p.text().length > 0) {
p.hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p>hello world</p>
</div>
<div class="aaProfileDataWrapper">
<p></p>
</div>
Related
Hello I would like to reach a level 3 div and change the style of this div
in my example I would therefore like to be able to apply disply:none on style color red
to make the word Warning invisible
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
To select 3rd level div:
document.querySelector('#Zone > div > div > div')
Now the problem is you have 4 div at 3rd level. So needed to select all and check style color. That gives:
const warningNone = () => {
Array.from(document.querySelectorAll('#Zone > div > div > div')).forEach(el => {
if (el) {
if (el.style.color === 'red') {
el.style.display = 'none';
}
}
})
}
window.addEventListener('load', warningNone);
<div id="Zone">
<div class="MR-Widget ">
<div class="Title"> </div>
<div class="Errors" style="display: none"></div>
<div class="Content">
<div class="search"> </div>
<div class="resultat" style="width: 120px;"></div>
<div class="MR" id="Lock" style="display: none;"> </div>
<div style="color: red"> Warning </div>
</div>
</div>
</div>
I modified the snippet to check the >div>div>div existence
By the way, I put the function to be fired when document loaded, otherwise your red will not apply
3...
try to split the query line in 2:
const warningNone = () => {
const els = document.querySelectorAll('#Zone > div > div > div');
els.forEach(el => {
if (el.style.color === 'red') {
el.style.display = 'none';
}
})
}
window.addEventListener('load', warningNone);
now in dev tools check which line fire the error
I have multiple with various div inside. On click of more or less a tag I want to display specific i.e. display_on_click
And I want to add that class only for 2 minutes after that remove that class and hide div
My HTML code as below:
$('body').on("click", ".more, .less", function() {
var obj = $(this);
obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show');
});
.display_on_click {
display: none
}
.display_on_click.display_on_click_show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ol class="item_wrapper">
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
<li class="product_info">
<div class="title">
<h3>Title here</a>
</div>
<div class="incre_decre">
<a class="more">+</a>
<a class="less">+</a>
</div>
<div class="display_on_click">Updated</div>
</li>
</ol>
</div>
Anyone have idea what I am doing wrong then let me know.
And I want to add that class only for 2 minutes after that remove that class and hide
I would do it like this:
$('body').on("click", ".more, .less", function() {
let parentLi = $(this).parent().parent();
let elementToManipulate = obj.find('.display_on_click');
elementToManipulate.addClass('display_on_click_show');
setTimeout(()=> {
elementToManipulate.removeClass('display_on_click_show')
}, 120000);
});
Instead of using closests I'm grabbing the parent of the parent which is the <li>. You can use closest to grab it. Once I am in the parent li, I find the child with the .display... class (the elementToManipulate object).
Then I add the classes and create a setTimeout to remove the class after 120.000 miliseconds (60sec * 2 * 1000msec)
<button onClick='OpenDiv'>Open</button>
function OpenDiv(){
let div = document.getElementById('BoxOne')
if (div.style.display == 'flex') {
div.style.display = 'none';
else
div.style.display = 'flex';
}
I hope this will work 👍
How can target class="a-2" inside id="b" by clicking on class="a-1" also inside id="b"?
<div id="a">
<div class="a-1"></div>
<div class="a-2"></div>
</div>
<div id="b">
<div class="b-1"></div>
<div class="b-2"></div>
</div>
<div id="c">
<div class="c-1"></div>
<div class="c-2"></div>
</div>
You can always go through the parent:
element.parentNode.querySelector('.a-2')
You can select all sibling nodes by selecting all children of the parent of the clicked node and then filter out the node that is clicked.
const el = document.querySelectorAll('div > div');
const siblings = function(el) {
const nodes = el.parentNode.children;
return [...nodes].filter(node => node !== el)
}
el.forEach(function(e) {
e.addEventListener('click', function() {
siblings(this).forEach(node => {
console.log(node.textContent)
})
})
})
<div id="a">
<div class="a-1">a</div>
<div class="b-2">b</div>
<div class="c-2">c</div>
</div>
<div id="b">
<div class="a-1">a</div>
<div class="b-2">b</div>
</div>
<div id="c">
<div class="a-1">a</div>
<div class="b-2">b</div>
</div>
How can I use vanilla JS to find and delete elements with a specific class X where the parent has class Y?
Example. Given
<div class="likes noise1">
<div class="count noise2">
42
</div>
</div>
<div class="retweets noise3">
<div class="count noise4">
7
</div>
</div>
<div class="messages noise5">
<div class="count noise6">
2
</div>
</div>
I would like to delete the first two ".count" elements (the childs of ".likes" and ".retweets"). The messages div however should be left untouched.
I have tried using querySelectorAll which return a frozen NodeList and iterating it, without success.
You can loop through all the elements to check the Element.className property of the Node.parentNode to remove the element like the following way:
document.querySelectorAll('.count').forEach(function(el){
var classN = el.parentNode.className
if(classN.includes('likes') || classN.includes('retweets'))
el.remove();
});
<div class="likes">
<div class="count">
42
</div>
</div>
<div class="retweets">
<div class="count">
7
</div>
</div>
<div class="messages">
<div class="count">
2
</div>
</div>
OR: You can simply simply specify both the classes as part of the selector, in which case you do not need to check the parentNode as the selector will give you only the elements inside the parents:
document.querySelectorAll('.likes > .count, .retweets > .count').forEach(function(el){
el.parentNode.remove();
});
<div class="likes">
<div class="count">
42
</div>
</div>
<div class="retweets">
<div class="count">
7
</div>
</div>
<div class="messages">
<div class="count">
2
</div>
</div>
Another alternative, further to those already given is to keep an array of the css selector you'll need to find your targets. From there, it's just a simple matter of using querySelector so that the result is still live, albeit in a loop.
"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt)
{
var tgtSelectors = [ '.likes > .count', '.retweets > .count' ];
tgtSelectors.forEach(removeBySelector);
}
function removeBySelector(curSelector)
{
var tgt = document.querySelector(curSelector);
while (tgt != undefined)
{
tgt.remove();
tgt = document.querySelector(curSelector);
}
}
<div class="likes">
<div class="count">42</div>
</div>
<div class="retweets">
<div class="count">7</div>
</div>
<div class="messages">
<div class="count">2</div>
</div>
I am trying to loop through Html and find if an element has a specific child:
$('#thisFormat article div p').each(function() {
if ( $(this).parent().find('.specialclass').length) {
var LowerTrue="Yes";
IsLower.push(LowerTrue);}
else{
var LowerTrue="No";
IsLower.push(LowerTrue);
};
});
But I only get No answers though some elements has that specialclass. Also there is a ::before tag in the element that I want to check if it exists:
<i title="Exists" class="specialclass">
::before
</i>
So is it possible to solve my problem? Any suggestions are much appreciated.
HTML:
<div id="thisFormat">
<article>
<div>
<p class="specialclass">
<i title="Hello" class="specialclass">
::before
</i>
</p>
</div>
</article>
<article>
<div>
<p class="specialclass">
</p>
</div>
</article>
</div>
This works:
$('#thisFormat article div p').each(function() {
if ( $(this).children("i").length) {
var LowerTrue="Yes";
IsLower.push(LowerTrue);}
else{
var LowerTrue="No";
IsLower.push(LowerTrue);
};
});
To check for the ::before tag inside your .each() you can do
$(/* get the <i> you want */).html == '::before';
The problem with your array is that by asking the parent() you are targetting the div, while you say the <i>'s are in <p>'s
Try the following
var IsLower = []
$('#thisFormat article div p').each(function() {
if ($(this).find('.specialclass').length == 1) {
var LowerTrue = "Yes";
IsLower.push(LowerTrue);
} else {
var LowerTrue = "No";
IsLower.push(LowerTrue);
};
});
$('#out').html(IsLower);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thisFormat">
<article>
<div>
<p>
<i title="Exists">
</i>
</p>
<p>
<i title="Exists" class="specialclass">
</i>
</p>
</div>
</article>
</div>
<div id="out"></div>