We Keep Coding

How to get content of span tag in div child?

I have this:
<div _ngcontent-cbl-c27="" class="real-time-data dark">
<div _ngcontent-cbl-c27="">
<span _ngcontent-cbl-c27="" class="__bolder label-range-fall"> 0.00286414 </span>
<span _ngcontent-cbl-c27="" class="__fs-12 price-cny"> 0.0029 </span>
</div>
<div _ngcontent-cbl-c27="" class="__bolder label-range-fall">-4.95%</div>
</div>
How to export innerHTML of class __bolder label-range-fall of parent class real-time-data dark to console.log?

You can use querySelector() function.
const element = document.querySelector(".real-time-data span.label-range-fall");
console.log(element.innerHTML);
<div _ngcontent-cbl-c27="" class="real-time-data dark">
<div _ngcontent-cbl-c27="">
<span _ngcontent-cbl-c27="" class="__bolder label-range-fall"> 0.00286414 </span>
<span _ngcontent-cbl-c27="" class="__fs-12 price-cny"> 0.0029 </span>
</div>
<div _ngcontent-cbl-c27="" class="__bolder label-range-fall">-4.95%</div>
</div>

var element = document.querySelector(".real-time-data>.label-range-fall");
console.log(element.innerHTML);

each() if number of elements are present in each div, set class remove to other div

I have a search result page. Each article there has an image, title, description and tags. I want that each article which has less than 6 tags, to add remove class from a div.
$('.searchTag-container').each(function(){
cat = $('.searchResult__tag',this).children().length;
if (cat < 6) {
console.log(cat);
$(".share").addClass("remove");
}
});
When I do this the remove class adds to all of articles even if it has 6 or more tags.
<div class="row bottom">
<div class="col-md-8">
<div class="searchResults">
<div class="searchTag-container">
<div class="searchResult__tag " data-number="0">
Tag1
</div>
<div class="searchResult__tag" data-number="1">
Tag2
</div>
<div class="searchResult__tag" data-number="2">
Tag3
</div>
<div class="searchResult__tag" data-number="3">
Tag4
</div>
<div class="searchResult__tag" data-number="4">
Tag5
</div>
<div class="searchResult__tag" data-number="5">
Tag6
</div>
</div>
</div>
</div>
<div class="col-md-4 share">
<div class="social">
<a class="btn-facebook"><img src="""></a>
<a class="btn-twitter"><img src=""></a>
<a class="btn-linkedin"><img src="""></a>
</div>
</div>

Your code is working ok, but the mistake is you are looping through .searchTag-container, which will iterate only once and you are checking .searchResult__tag's length,
so in .searchTag-container there are 6 .searchResult__tag and each one has one children, so it gives length of all .searchResult__tag's children combined so it becomes 6, and so variable cat = 6 and it gives false when you check cat < 6.
So for solving it, you have to iterate through loop of each .searchResult__tag and check it's children length as i have done,
check below for working solution of your problem:
$(function(){
$('.searchTag-container .searchResult__tag').each(function(){
cat = $(this).children().length;
if (cat < 6) {
console.log(cat);
$(".share").addClass("remove");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bottom">
<div class="col-md-8">
<div class="searchResults">
<div class="searchTag-container">
<div class="searchResult__tag " data-number="0">
Tag1
</div>
<div class="searchResult__tag" data-number="1">
Tag2
</div>
<div class="searchResult__tag" data-number="2">
Tag3
</div>
<div class="searchResult__tag" data-number="3">
Tag4
</div>
<div class="searchResult__tag" data-number="4">
Tag5
</div>
<div class="searchResult__tag" data-number="5">
Tag6
</div>
</div>
</div>
</div>
<div class="col-md-4 share">
<div class="social">
<a class="btn-facebook"><img src=""></a>
<a class="btn-twitter"><img src=""></a>
<a class="btn-linkedin"><img src="""></a>
</div>
</div>

you can try below script:
$('.searchTag-container').each(function(){
cat = parseInt($('.searchResult__tag',this).children().length);
if (cat < 6) {
$(this).closest(".row").children(".share").addClass("remove");
console.log(cat);
}
});
check this fiddle
Hope this will help you.

To select the Children with a specific class I would use $(this).children('.searchResult__tag') and get the length of that by .length as you did before

javascript remove parent div where particular class appears in hierarchy below

First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>

You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>

Get values of child elements in a Div and put into a list or new div

Im trying to get the value of all the child elements of a div when a condition is met and then put them in to a list within a new Div.
The structure of the parent and child elements are as follows:
<div id="measurements">
<h3> FACIAL BIO</h3>
<ul>
<div class="wrapperBar">
<h4> Distance between Eyes: </h4>
<div class="valueBar" id="distanceBetweenEyes"> </div>
</div>
<div class="wrapperBar">
<h4> Distance between Ears: </h4>
<div class="valueBar" id="distanceBetweenEars"> </div>
</div>
<div class="wrapperBar">
<h4> Nose Width: </h4>
<div class="valueBar" id="noseWidth"> </div>
</div>
<div class="wrapperBar">
<h4> Nose Length: </h4>
<div class="valueBar" id="noseLength"> </div>
</div>
<div class="wrapperBar">
<h4> Mouth Width: </h4>
<div class="valueBar" id="mouthWidth"> </div>
</div>
<div class="wrapperBar">
<h4> Distance between Chin and Mouth: </h4>
<div class="valueBar" id="chinToMouth"> </div>
</div>
<div class="wrapperBar">
<h4> Eye Width: </h4>
<div class="valueBar" id="eyeWidth"> </div>
</div>
<div class="wrapperBar">
<h4> Distance between Nose and Mouth: </h4>
<div class="valueBar" id="noseToMouth"> </div>
</div>
<div class="wrapperBar">
<h4> Mouth Height: </h4>
<div class="valueBar" id="topLipToBottomLip"> </div>
</div>
<div class="wrapperBar">
<h4> Nostril Width: </h4>
<div class="valueBar" id="nostrilWidth"> </div>
</div>
<div class="wrapperBar">
<h4> Eyebrow Length: </h4>
<div class="valueBar" id="eyebrowLength"> </div>
</div>
<div class="wrapperBar">
<h4> Distance Between Eyebrows: </h4>
<div class="valueBar" id="distanceBetweenEyebrows"> </div>
</div>
<div class="wrapperBar">
<h4> Emotion: </h4>
<div class="valueBar" id="emotion"> </div>
</div>
What I want is each of the titles which are h4 elements and the corresponding element below it into a new div which I create as soon as a condition is met.
Example:
<div id="wrapper">
<ul>
<li> Distance Between Eyes: VALUE_HERE </li>
<li> Distance Between Ears: VALUE_HERE </li>
<li> Nose Width: VALUE_HERE </li>
</ul>
</div>

Do you use jQuery? If so:
$('#measurements h4').each(function() {
$('#wrapper ul').append('<li>' + $(this).text() + $(this).next().text() + '</li>');
});
In pure JavaScript, without jQuery:
var h4s = document.querySelectorAll('h4');
var ul = document.querySelector('#wrapper ul');
var h4, val, thisText, valText, finalText, newLi;
for (var i=0; i>h4s.length; i++) {
h4 = h4s[i];
val = h4.nextSibling;
thisText = h4.innerText || h4.textContent;
valText = val.innerText || val.textContent;
finalText = thisText + ': ' + valText;
newLi = document.createElement('li');
newLi.hasOwnProperty('innerText') && (newLi.innerText = finalText) || (newLi.textContent = finalText);
ul.appendChild(newLi);
}
I haven't tested it but should work. You can debug it.

Using the correct Jquery selectors to migrate content between divs

Majorly stuck here and would love some help. I am trying migrate the hidden div content of a particular topic to a separate area when it's specific title is clicked. At the minute I can get the content to migrate but instead of the specific topic content it just cycles through the content upon clicking.
Sorry for my poor Title, I'm struggling to define my exact problem. Please change if you feel you can do better.
http://jsfiddle.net/vBCs5/1/
Clicking the grey subtitles migrates the content.
Thank you in advance.
Jquery:
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
$(".freemarker").each(function () {
var working = $(this).contents();
var ref = $(".content-box").contents();
$(this).append(ref);
$(".content-box").append(working);
});
});
});
HTML
<html>
<body>
<div class="page-wrap">
<div class="left-column-wrap">
<h1>FreeMarker +</h1>
<div class="freemarker-wrap">
<span class="test">
<h2>Lucene Call ></h2>
<div class="freemarker">
<p>Click to hide stories</p>
</div>
</span>
<span class="test">
<h2>Arrays ></h2>
<div class="freemarker">
<p>Arrays</p>
</div>
</span>
<span class="test">
<h2>Declaring and outputting variables ></h2>
<div class="freemarker">
<p>Declaring</p>
</div>
</span>
<span class="test">
<h2>IF Statements ></h2>
<div class="freemarker">
<p>Statements</p>
</div>
</span>
<span class="test">
<h2>Fragments ></h2>
<div class="freemarker">
<p>Fragments</p>
</div>
</span>
<span class="test">
<h2>Working with Numbers ></h2>
<div class="freemarker">
<h3>Numbers</h3>
</div>
</span>
<span class="test">
<h2>Current Date ></h2>
<div class="freemarker">
<p>Current</p>
</div>
</span>
</div>
<div class="javascript-wrap">
<h1>JavaScript +</h1>
</div>
<div class="javascript-wrap">
<h1>JQuery +</h1>
</div>
<div class="javascript-wrap">
<h1>HTML +</h1>
</div>
<div class="javascript-wrap">
<h1>CSS +</h1>
</div>
</div>
<div class="content-box">
</div>
</div>
</body>
</html>

assuming this is what your are asking for...
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$(".test").click(function () {
var working=$(this).find(".freemarker").html(); // get that particular <span> html
$(".content-box").html(working); <migrate it to content
});
});
fiddle here

I think you're over complicating it ;)
$(document).ready(function() {
$(".freemarker-wrap div").hide();
$("span.test").click(function () {
$(".content-box").html( $(this).find("div.freemarker").html() );
});
});