We Keep Coding

How to hide parent div if first child is empty

I want to hide class "aa" if the first div element is empty in class "ca". Please guide me
My sample code:
<div class="aa">
<div class="ca">
<div></div>
<div class="cb"></div>
<div class="cc"></div>
</div>
<div>
Appreciate your response!

You can use children(":first") to get first child of div as
$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
$('.aa').hide();
}
});
$(document).ready(function(){
if($('.ca').children(":first").text() == ""){
$('.aa').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="aa">
<div class="ca">
<div></div>
<div class="cb">A</div>
<div class="cc">B</div>
</div>
<div>

You can check to see if the first childNode of the .ca parent element has content, and then target .aa from there if it does not:
//If there is no content within the first div of the class="ca" div...
//choose between textContent and innerHTML below
//based on whether it is going to have any text or some HTML within (with possibly no text)
if (!document.querySelector('.ca').childNodes[0].innerHTML) {
//hide the class="aa" div
document.querySelector('.aa').style.display = 'none';
}

Duplicate div on click with jquery

Basically, I want to be able to click the div with the class click-to-add and then I want that to add another div with the class duplicate above the click-to-add div and directly after the first duplicate div.
<div class="site-table-row header">
<div class="site-table-row duplicate">
<div></div>
<div></div>
<div></div>
</div>
<div class="site-table-row">
<div class="click-to-add">Click Me</div>
</div>
</div>
Thank you in advance for any assistance/direction!

$(document).ready(function (){
$('button').click(function (){
$('.header').append($('.header').html())
/* console.log($('.header').html()); */
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-table-row header">
<div class="site-table-row duplicate">
<div>1</div>
<div>1</div>
</div>
<div class="site-table-row">
<button class="click-to-add">Click Me</button>
</div>
</div>

Solved with
$('.click-to-add').click(function () {
$('.duplicate').clone().insertAfter('.duplicate').last();
});

I made it with pure js but I think it can help you at least with the concept:
<div class="site-table-row header">
<div id="duplicatediv" class="site-table-row duplicate">
<div></div>
<div></div>
<div></div>
</div>
<div class="site-table-row">
<div class="click-to-add" onClick="addStuff();">Click Me</div>
</div>
</div>
<script>
const addStuff = () => {
let div = document.getElementById('duplicatediv');
var x = document.createElement("DIV");
var t = document.createTextNode("This is the duplicate.");
x.appendChild(t);
div.appendChild(x);
}
</script>
https://jsfiddle.net/s7epxLua/
it selects the div with an Id with getElementById, and then appends a div to it.

How to Remove a parent of an empty tag jquery

I have multiple data which i inserted into an html tag. Some of the tags are empty while some are filled with details. What i want is how do i remove the parent of the ones that are empty, this is my code
HTML
<div class="row order-info">
<div class="col-12">
<h6 class="nameDiv">Hello this is nice</h6>
</div>
<div class="col-12">
<h6 class="proId"></h6>
</div>
<div class="col-12">
<h6 class="proP">testing. testing</h6>
</div>
</div>
JQUERY
removeEmpty();
function removeEmpty() {
if($(".order-info div h6").text().length < 1) {
$(this).closest(".col-12").remove();
}
}
Please What am i doing wrong

$('.order-info .col-12').has('h6:empty').remove();
This code will remove those elements of class .col-12 that contain an empty h6 element.

You're not iterating using the css selector.
Try this function:
function removeEmpty() {
$(".order-info div h6").each(function(elem){
if($(this).html().length < 1) {
$(this).closest(".col-12").remove();
}
})
}

How to add all selected elements into an array and iterate through it?

Suppose I have the elements below
-- a. I want to add the 3 div block of parent_1 into an array.
-- b. Then loop through the array and add each div block (individually) into parent_2.
I want to do these with pure JavaScript. Is it possible?
Thank you.
<div class="parent_1">
<div></div>
<div></div>
<div></div>
</div>
<div class="parent_2">
<!-- add here -->
</div>

You can do this using querySelectorAll with selector .parent_1 > div to get all direct div inside .parent_1 then use forEach and cloneNode to add them to .parent_2.
Demo:
var divs = document.querySelectorAll('.parent_1 > div');
var parent_2 = document.querySelector('.parent_2');
divs.forEach((div) => {
parent_2.appendChild(div.cloneNode(true));
})
<div class="parent_1">
<div>
<div></div>
</div>
<div></div>
<div></div>
</div>
<div class="parent_2">
<!-- add here -->
</div>
Note that if you use .parent_1 div with the html above, you will get 4 div in .parent_2.

You can do that in following steps:
First use querySelectorAll() to get all the <div> elements in parent_1
Then select the parent_2 using querySelector()
Loop through the div using forEach()
clone each div using cloneNode() and add it to parent_2 using appendChild()
let elms= document.querySelectorAll('.parent_1 div');
let parent2 = document.querySelector('.parent_2');
elms.forEach(x => {
parent2.appendChild(x.cloneNode(true));
})
<div class="parent_1">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div class="parent_2">
<!-- add here -->
</div>

Try this way using querySelectorAll and cloneNode
(function() {
let nodes = document.querySelectorAll('.parent_1 div');
let dest = document.getElementById('parent_2');
nodes.forEach(e => {
let clone = e.cloneNode(true);
dest.appendChild(clone);
});
})();
.parent_1 {
background: red;
}
.parent_2 {
background: green;
}
<div class="parent_1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="parent_2" id="parent_2">
<!-- add here -->
</div>

Using JQuery:
<script>
$(function() {
$('.parent_1').children().each(function() {
$(this).appendTo('.parent_2');
});
});
</script>

Remove div class based on child div

I have a html like this
<div class="accordion_in1 accordion_in acc_active">
<div class="acc_head" id="removeArrow">
<div class="acc_icon_expand"></div>
Investor Relations
</div>
<div class="acc_content" style="display: block;">
<div class="acc_content_faq1">
<ul>
<li>
Profile
</li>
</ul>
</div>
<div class="acc_content_faq1">
<ul>
<li>
Directors
</li>
</ul>
</div>
</div>
</div>
I need to remove the class acc_head from the second div if there is no div with class acc_content
I tried to get this in jquery like
<script>
$(document).ready(function(){
if ($("accordion_in > div.acc_content").length < 0) {
$('#removeArrow').removeClass('.acc_head')
}
});
</script>
But I can't able to remove the class.Can any one help
Thanks in advance for help

Try this code.
if ($("accordion_in > div.acc_content").length) {
$('#removeArrow').removeClass('acc_head')
}

If there is no selector with accordion_in > div.acc_content, the length is 0, not a value less than 0.
Try this code.
if (!$("accordion_in > div.acc_content").length) {
$('#removeArrow').removeClass('.acc_head')
}

Try this:
<script>
$(document).ready(function(){
if (($(".acc_active").find("div.acc_content")).length == 0) {
$('#removeArrow').removeClass('.acc_head');
}
});
</script>