Develop Reference

Hide parent container if children are set to display none

Not sure what I'm missing here, but trying to hide the entire container for links parent-container if the anchor links inside it are set to inline display: none
I've tried checking if the style is none with
[...document.querySelectorAll(".parent-container a")].map(item => item.style.display == "none" && document.querySelectorAll(".parent-container").style = "display: none")
But can't get it to check correctly.
const parentContainer = document.querySelector(".parent-container [data-filter]");
const toggleViews = function(filterName) {
parentContainer.forEach($el => {
if ($el.dataset.filter == filterName || filterName == 'show-all') {
$el.style.display = "initial";
} else {
$el.style.cssText = "display:none!important";
}
});
};
section {
border: 1px solid #000;
}
<section class="parent-container">
<div>
<div class="">
<header>
<h3>heading</h3>
</header>
<div class="col-w1">
<a href="#" class="" style="display: none;" data-filter="car">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: none;" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: none;" data-filter="house">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
</div>
</div>
</div>
</section>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>heading</h3>
</header>
<div class="col-w1">
<a href="#" class="" style="display: block;" data-filter="house">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: block;" data-filter="car">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
<a href="#" class="" style="display: block;" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Test
</div>
</a>
</div>
</div>
</div>
</section>

You need a nested loop, the outer iterating over each parent-container and the inner over each a element, here using NodeList.forEach for the outer loop and Array.every over the a elements queried from each container (with getElementsByTagName in this case).
document.querySelectorAll(".parent-container").forEach(container => {
const aElements = [...container.getElementsByTagName("a")];
if (aElements.every(element => element.style.display === "none")) {
container.style.display = 'none'
} else {
container.style.display = 'block'
}
});
section{
border: 1px solid #000;
}
<section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div></div></div></div></section><section class="parent-container"><div><div class=""><header><h3>heading</h3></header><div class="col-w1"><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div><div class="col-item"><img src="#" alt="">Test</div></div></div></div></section>
Edit
In response to your more complete snippet here is an extended example. You are still not addressing the multiple levels necessary to achieve what you need (as noted by #danh in the comments as well). You need to address each parent-container and then the relevant children of each individually. The example below first uses your logic to filter the children of each container, and then checks if they have all been hidden or not. I've implemented it with a .hidden class instead of inline CSS but you can adapt as you see fit.
// query only the parent-containers
const parentContainers = document.querySelectorAll(".parent-container");
function toggleViews(filterName) {
for (const container of parentContainers) {
// query relevant children
const elements = [...container.querySelectorAll("[data-filter]")];
// hide filtered elements
for (const element of elements) {
if (element.dataset.filter === filterName || filterName === 'show-all') {
element.classList.remove('hidden');
} else {
element.classList.add('hidden');
}
}
// hide parent if all children are hidden
if (elements.every(element => element.classList.contains('hidden'))) {
container.classList.add('hidden');
} else {
container.classList.remove('hidden');
}
};
};
document.addEventListener('click', (e) => {
if (e.target.nodeName === 'BUTTON'){
toggleViews(e.target.textContent.toLowerCase().replace(' ', '-'));
}
});
section {
border: 1px solid #000;
}
.hidden {
display: none;
}
<button type="button" class="filter">Boat</button>
<button type="button" class="filter">House</button>
<button type="button" class="filter">Car</button>
<button type="button" class="filter">Show all</button>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>Section 1</h3>
</header>
<div class="col-w1">
<a href="#" class="" data-filter="car">
<div class="col-item">
<img src="#" alt="">Car
</div>
</a>
<a href="#" class="" data-filter="bicycle">
<div class="col-item">
<img src="#" alt="">Bicycle
</div>
</a>
<a href="#" class="" data-filter="house">
<div class="col-item">
<img src="#" alt="">House
</div>
</a>
</div>
</div>
</div>
</section>
<section class="parent-container">
<div>
<div class="">
<header>
<h3>Section 2</h3>
</header>
<div class="col-w1">
<a href="#" class="" data-filter="shed">
<div class="col-item">
<img src="#" alt="">Shed
</div>
</a>
<a href="#" class="" data-filter="car">
<div class="col-item">
<img src="#" alt="">Car
</div>
</a>
<a href="#" class="" data-filter="boat">
<div class="col-item">
<img src="#" alt="">Boat
</div>
</a>
</div>
</div>
</div>
</section>

Add class to element based on its index

Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});

To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>

Add dynamic divs around 6 image urls using jquery

I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
Below is what I want to achieve:
<div class ="owl-photos">
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>
<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>
Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge
Attempted with the code below:
$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");

$(function () {
var $result = $('<div class="owl-photos"></div>');
var length = $('.owl-photos a').length;
$('.owl-photos a').each(function (key, item) {
if (key == 0 || key == length - 1) {
var $div = $('<div class="item"></div>').append(item);
$result.append($div);
} else {
var $small = $result.find('.item-small');
console.log($small);
if (!$small.length) {
var $div = $('<div class="item item-small"></div>').append(item);
$result.append($div);
} else {
$small.append(item);
}
}
});
$('.owl-photos').html($result.html());
});
https://jsfiddle.net/atw4gwrr/

You can create elements with JavaScript, append the specific elements to them, then place the new elements into .owl-photos. By appending the <a> elements to the newly made <div>s they are moved from their previous place, that's why you don't see them duplicate.
Below, I get the list of childs, then group them as such:
The .first() child is placed in a <div class="item">, then appended
The :not(:first-child) and :not(:last-child) elements are placed in <div class="item item-small">, then appended
The .last() child is placed in a <div class="item">, then appended
$(function(){
var $photos = $('.owl-photos'),
$childs = $photos.children(),
$itemWrapper = $(document.createElement('div')).attr('class','item'),
$itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
$photos.append(
$itemWrapper.clone().append($childs.first()),
$itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
$itemWrapper.clone().append($childs.last())
);
})
.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=1" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=2" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=3" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=4" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=5" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=6" alt="" />image6
</a>
</div>

Second nav-bar not expanding after being collapsed?

In this simple expand/collapse navbar I made, the second navbar does not re-expand once it is collapsed, though the first one works fine.
Once I collapse the second section, it stays collapsed and will not expand, though the first section continues to work fine, expanding and collapsing
Thanks, all help is appreciated.
Here is my code below:
<script>
var CurrentSec;
var CurrentMenu;
var CurrentLink;
function Change(sec, state) {
CurrentSec = "Sec-"+sec;
CurrentMenu = "Menu-"+sec;
CurrentLink = "Link-"+sec;
if (state == 0) {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
document.getElementById(CurrentMenu).style.display = "none";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
}
else {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
document.getElementById(CurrentMenu).style.display = "inline";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
}
}
</script>
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></span>
<div id="Navbar"><div class="submenu" id="Menu-1">
<a id="Link-1" >Test1</a>
<a id="Link-2" >Test2</a>
<a id="Link-3" >Test3</a>
<a id="Link-4" >Test4</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
<span class="title" id="community">
<img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
<img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</span>
<div id="Navbar">
<div class="submenu" id="Menu-2">
<a id="Link-1" >Test5</a>
<a id="Link-2" >Test6</a>
<a id="Link-3" >Test7</a>
<a id="Link-4" >Test8</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
</div>

how to remove parent div when click on child inner anchor element?

this is my html code for aove fig.....
when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>

$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});

Here's another option for you, which you can see a working example here:
http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>

Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>

Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});

You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});