We Keep Coding

How to get item that has a specific class from set of elements and then count which number of the set of elements it is?

So it's hard to explain without giving an example, but I'll try my best.
So lets say my HTML looks like this:
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
So what I want is in Javascript/jQuery to get the .active-piece, then from there on count which .item it is inside of the .container element.(So 2 being the answer, considering we start counting from 0)
I know I can get the $('.active-piece'), and probably should get the parent of the parent from there but then what am I suppose to do?
Maybe I'm thinking too difficult, but I can't seem to figure out how to do get the expected result. Does anyone know how to?

Basically you want to get index of the item element that has child element at some level with the class active-piece. To do that you could use closest method to get parent with class item and then get index of that element
$('.active-piece').closest('.item').index();
const index = $('.active-piece').closest('.item').index();
console.log(index)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>

I know there are examples above, but they all use jQuery. So I've written a little bit about how to do this with vanilla javascript. It may not be the most optimal, but hopefully it helps if you don't wish to use jQuery. (I still recommend the jQuery methods if you already use it in your project)
So we start by finding the .active-piece element.
var active = document.querySelector(".active-piece");
Next, we'll back up until we're in the .item element. We know it is two elements above.
var item = active.parentElement.parentElement;
Now we'll loop through the parent of item until we find a match.
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
Here's a snippet
var active = document.querySelector(".active-piece");
var item = active.parentElement.parentElement;
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>

you can make use of filter to get all the items having active-piece as child element,
you can store result in itemWithActivePiece variable and use it for further operations
$(function(){
var itemWithActivePiece = $('.container .item').filter(function(){
return $(this).find('.piece-container .active-piece').length > 0;
});
console.log(itemWithActivePiece.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>

jQuery remove text from h1

I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});

you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node

jQuery Toggle closest info

I have the following html:
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message"></div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message"></div>
</div>
This is my ns.init function:
ns.init = function() {
$(".message").hide();
$(".interrogation").click(function(){
$(".interrogation").closest(".group").parent().find(".message").toggle();
});
}
The current code works but it toggles all the messages on the page when I click one of them. How can I make it toggle only the message that is exactly after the question mark ?

That is because you use $(".interrogation") selector in your function. This selects all elements with that class in the document. Use $(this) to only have the element that you clicked on as reference for your selector.
Here is a working fiddle:
$(function() {
$(".message").hide();
$(".interrogation").click(function(){
$(this).closest(".group").parent().find(".message").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message2</div>
</div>

Here you go with a solution https://jsfiddle.net/denquhL1/1/
$('.interrogation').click(function(){
$(this).closest('div.group').next('div.message').slideToggle();
});
.message{
display: none;
}
.interrogation {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message 1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message 2</div>
</div>
Onclick of .interrogation class, it will traverse to closest .group container, then it will look for next .message container.
Instead of toggle, I've used slideToggle with animation.
Hope this will help you.

Something like this?
var ns = {};
ns.init = function() {
$(".message").hide()
$(".interrogation").click(function() {
var commonParent = $(this).closest(".col-md-12");
commonParent.find(".message").toggle();
});
}
ns.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Msg 1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Msg 2</div>
</div>

Applying styles based on jquery conditions

I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number

You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.

Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.

bootstrap grid not spacing properly

Here is the fiddle I am working on right now
http://codepen.io/trippygif/pen/KVWYdV
Here is the HTML
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Basically I am having trouble with the Bootstrap alignment that occurs in the "about" div. I cannot seem to get the paragraph on the left side of the page and the list on the right side of the page. I assume something might be wrong with my CSS. Any suggestions would be much appreciated :)

If your problem is that the "About Me" heading and the list doesn't start in the same vertical height, then you have to do something with your .to-fit CSS rule where you set a padding-top : 80px;.
Just give a properly sized top padding or margin to your right block:
<div class="col-md-6" style="margin-top:120px;">
<p>My Proficiencies</p>
...
or
<div class="col-md-6" style="padding-top:120px;">
<p>My Proficiencies</p>
...
Of course you can/should place this rule to a CSS rule with a selector of your choice.

change class container tocontainer-fluid
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>