Develop Reference

Hide parent div when it contains <textarea>?

I have got a div structure that is dynamically generated by it's content. It is looking like this:
<div class="fpd-list-row fpd-add-layer" id="1609962837979"><div class="fpd-cell-0"><span></span></div><div class="fpd-cell-1">Dein Foto</div><div class="fpd-cell-2"><span class="fpd-icon-add"></span></div></div>
<div class="fpd-list-row" id="1609962838288"><div class="fpd-cell-0"><span class="fpd-current-color" style="background: #ffffff" data-colors=""></span></div><div class="fpd-cell-1"><textarea>Wanderlust</textarea></div><div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span></div></div>
I want to hide only the textareas and the parents element up to .fpd-list-row but keep the other div like .fpd-list-row .fpd-add-layer untouched. When I set the textarea to display none, the parent divs still exists. Is there a way hide the parent div up to ..fpd-list-row only when it contains <textarea>?

Loop through all divs, and use .find() to check for parent elements matching a certain selector.
$(document).ready(function(){
var divs = $("div");
for(var i = 0; i < divs.length; i++){
var current = divs[i];
if($(current).find("textarea").length != 0){
current.style.display='none';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
For the most concise solution (one liner), use:
$(document).ready(function(){
jQuery('textarea').parent().hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">fpd-lock-element<span class="fpd-icon-unlocked">fpd-icon-unlocked</span></span></div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>

Check the children of the parent div:
divs = document.getElementsByTagName("DIV")
for (var i = 0; i < divs.length; i++) {
if (divs[i].childElementCount == 1 && divs[i].children[0].tagName.toLowerCase() == "textarea") {
divs[i].style.display = "none";
}
else { //for demonstration purposes
divs[i].style.backgroundColor="red"
}
}
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span>
</div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
Or, remove the parent of the textarea (idea credit of Spectric):
textareas = document.getElementsByTagName("TEXTAREA")
for (var i = 0; i < textareas.length; i++) {
textareas[i].parentNode.style.display = "none"
}
<div class="fpd-cell-1"><textarea>My Text</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element">Outer Span<span class="fpd-icon-unlocked">Inner Span</span></span>
</div>
<div class="fpd-cell-3"><textarea>My Text</textarea></div>
The first example hides the div only if there is one element in it, and it is the textarea, whereas the second method hides the parent of the textarea. Therefore, the first one can be used in situations where you need a textarea, and the second one just won't show any textareas regardless of the situation.
However, you could just make the dynamic content not generate the textarea and use a div:blank pseudo class in the css.
--------------- UPDATE ---------------
Update after code was updated in question.
textareas = document.getElementsByTagName("TEXTAREA")
for (var i = 0; i < textareas.length; i++) {
textareas[i].parentNode.parentNode.style.display = "none"
}
<div class="fpd-list-row fpd-add-layer" id="1609962837979">
<div class="fpd-cell-0"><span></span></div>
<div class="fpd-cell-1">Dein Foto</div>
<div class="fpd-cell-2"><span class="fpd-icon-add"></span></div>
</div>
<div class="fpd-list-row" id="1609962838288">
<div class="fpd-cell-0"><span class="fpd-current-color" style="background: white" data-colors=""></span></div>
<div class="fpd-cell-1"><textarea>Wanderlust</textarea></div>
<div class="fpd-cell-2"><span class="fpd-lock-element"><span class="fpd-icon-unlocked"></span></span>
</div>
</div>

How to loop and set inner content of DOM elements in jQuery and JavaScript?

I'm trying to loop through divs and set the content of a div inside the outer div. I tried this.
Here is the HTML div's I want to loop through and I want to set the content of div with class content-detail with the value for its attribute data-form data.
//the javascript code I used is this
$(function($) {
for (var i of $(".item .content-detail")) {
var container = document.querySelector($(i)[0]);
var formData = $(i).attr("data-formdata");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="item">
<div class="down-div"> </div>
<div class="detail">
<h4>Detail</h4>
<div id="div_" class="content-detail" data-formdata="my Item">
</div>
<div class="text-center">
<button class="btn btn-blue center"> SET !</button>
</div>
</div>
</div>
<div class="item">
<div class="down-div"> </div>
<div class="detail">
<h4>Detail</h4>
<div id="div_" class="content-detail" data-formdata="my Item">
</div>
<div class="text-center">
<button class="btn btn-blue center"> SET !</button>
</div>
</div>
</div>
But am stuck at this point var container = document.querySelector($(i)[0]);
I don't know how to get the jquery selector of that current div to a variable.

This may need some tweaks, but it should be close...
$(function ($) {
$(".item .content-detail").each(function(index, element) {
element.text($(element).attr("data-formdata"))
})
});
Take a look at the .each() method

$(function($) {
for (var i of $(".item .content-detail")) {
//var container = document.querySelector($(i)[0]);
var container = i;
var formData = $(i).attr("data-formdata");
}
});
I just needed the element

If you want to set the content of each DIV, you don't need a for loop. The .text() method takes a callback function, and it will be called on each element that matches the selector. The returned value is used as the new content.
$(".item .content-detail").text(function() {
return $(this).data("formdata");
});

This works.
$(function($) {
$(".item .content-detail").text(function(){
return $(this).attr("data-formdata");
})
});

Can you not just use JS like this:
[UPDATED]
function test() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var divsSub = divs[i].getElementById("div_").querySelectorAll(".content-detail");;
for (var iS = 0; iS < divsSub.length; iS++) {
var x = divsSub[iS].getAttribute("data-formdata");
divsSub[iS].innerHTML = x;
}
}
}

Using plain JavaScript to list only direct child elements

I am trying to list the img elements in my slideshow using JavaScript, which is all children in a container. In that container I also have 2 divs for the navigating arrows. They also contain a child img element.
How do I only list the first set of img elements and not the nav arrows as well using plain JavaScript?
<div id='imgContain'>
<?php
$path = "./resSlide";
$all_files = scandir($path);
$how_many = count($all_files);
for ($i=2; $i<$how_many;$i++) {
$num=$i-1;
echo "<img src=\"./resSlide/$all_files[$i]\" id= \"$num\" class= \"slideImg2\"/>";
}
?>
<div id='imgPosbar'>
<div id='imgPosbarIn'></div>
</div>
<div id='imgPosLeftBut' onclick='LeftClick();'>
<img class='imgBut' src="leftarrow.png" alt='Sorry'>
</div>
<div id='imgPosRightBut' onclick='RightClick();'>
<img class='imgBut' src='rightarrow.png' alt='Sorry'>
</div>
</div>

This will select all img which is a direct child of the #imgContain
var elems = document.querySelectorAll('#imgContain > img');
for (var i = 0; i < elems.length; i++) {
// do something with each img
var el = elems[i];
}

Check Div Elements by name fast

I have some Divs:
<div id="content">
<div class="c" id="1">
<div id="xyz">dont care</div>
<div id="texts1">
<div name="check"> ContentText </div>
</div>
</div>
<div class="c" id="2">
<div id="xuyz">dont care</div>
<div id="texts2">
<div name="check"> ContentText </div>
</div>
</div>
</div>
I want to iterate through all elements of the "c" class.
Then I want to check, if the Div elements named "check" of each "c" element contains special text.
If true, then manipulate the "c" element (which contains the special text)
I tried something like this:
var ele = document.getElementsByClassName("c");
for(var i=0;i<ele.length;i++)
{
var check = ele[i].getElementsByName("check");
if(check.innerHTML ....)
}
But thats not working :/
Log from Firefox:
TypeError: ele[i].getElementsByName is not a function
Where is my mistake?

A simple querySelectorAll() should do the trick:
var check = document.querySelectorAll('.c [name="check"]');
And as stated in a comment already, only document has getElementsByName method.

With jQuery this is very simple -
$('[name="check"]:contains("your special text")')

With jQuery (you have tagged it with it as well)
$(document).ready(function () {
$('div.c').find('div[name="check"]').each(function(){
// here check HTML and do needed manipulations
if($(this).html() == 'ContentText'){
$(this).closest('div.c').children().first().html('I CARE');
}
});
});
see jSFiddle -> http://jsfiddle.net/ApfJz/32/

Here is a modification of your code to make it work as intended
var ele = document.getElementsByClassName("c");
for (var i = 0; i < ele.length; i++)
{
if (ele[i].getAttribute('name') === "check") {
// do something with matching elements here
}
}

Issue using childNodes to process the childnodes javascript

I am trying to make display none for all the child nodes of a div. It works well with getElementsByTagname('*')
My Markup
<div id="container">
<div id="child1"></div>
<div id"child2">
<div id="inner-child"></div>
</div>
</div>
I would like to manipulate the display property of only the child1, child2.
function hideAllChildren(){
var elem = document.getElementById("container");
var children = elem.childNodes;
alert("children " + children.length)
for (i=0; i < children.length ;i++)
{
children[i].style.display="none";// Error - children[i].style undefined
}
}
Can you figureout what the issue could be ?

Not all the child nodes are elements, some are text nodes in some browsers and text nodes don't have a style property. Trying to access a property of a non-existant property throws an error.
Either test the node type or that the node has a (non-falsey value for its) style property first:
if (children[i].style) {
children[i].style.display="none";
}
However, you may find it much better to use a class and appropriate CSS rule and just add it to the parent element.
e.g.
<style type="text/css">
.hideAll * {
display: none;
}
</style>
</script type="text/javascript">
<button onclick="
document.getElementById('d0').className = 'hideAll';
">Hide all</button>
<button onclick="
document.getElementById('d0').className = '';
">Show all</button>
<div id="d0">Here is the div
<ul>
<li class="item">apple
<li class="item">orange
<li class="item">banana
</ul>
</div>

Why do you want to hide all the child nodes.
Where you can hide the parent and all the child will automatically hide.
So it will be simply:
function hideAllChildren(){
var elem = document.getElementById("container");
//alert("children " + children.length)
elem.style.display="none";
}

try this
<div id="container">container
<div id="child1">child1</div>
<div id"child2">Child 2
<div id="inner-child">inner-child</div>
</div>
</div>
<div id="clickme">Click me</div>
/// java script
$('#clickme').click(function() {
hideAllChildren();
});
function hideAllChildren(){
var elem = document.getElementById("container");
var children = elem.childNodes;
alert("children " + children.length)
$('#container').hide();
}