We Keep Coding

javascript list with content toggling acting like accordion,

I have a problem with pure JS list. I want the div with content (below each li) to display once the particular li is clicked. No idea how to make it work. I'm either ablo to show one "content" block or all of the at once (by adding the once that are commented now. Any help appreciated.
const channelList = document.getElementById("station-list");
channelList.addEventListener("click", function (e) {
const target = e.target;
if (target.matches("li")) {
content.classList.toggle("show");
//content2.classList.toggle("show");
//content3.classList.toggle("show");
//content4.classList.toggle("show");
//content5.classList.toggle("show");
//content6.classList.toggle("show");
}
})
https://jsbin.com/valojoruhe/1/edit?html,js,output

Try something like this:
Fiddle example: https://jsfiddle.net/eugensunic/9ebxvt1u/
your div's must be inside a li, otherwise you'll have invalid html
do not use multiple id's content, content1, content2 ... it's useless, rather define a class.
after you've clicked on the li element find the div element (filter it out) and then apply the desired styling to it.
you'll need to adjust the layout for your div to be below the paragraph, for now it's on the right side but toggles appropriately.
JS
const getAllLiElements = document.querySelectorAll('li');
for (let i = 0; i < getAllLiElements.length; i++) {
let element = getAllLiElements[i];
element.addEventListener('click', () => {
const dummyText = Array.from(element.children).filter(htmlNode => htmlNode.tagName === 'DIV')[0]
dummyText.classList.toggle('show')
})
}

How to remove li on click of its child element

I am dynamically creating li with javascript, I want to add a close button to each li element created dynamically to delete the li element on click of the close button.This is my code so far:
function addNew(){
// get value from input field
var taskName = document.getElementById('task-name').value;
// innerHTML to be inserted inside li
var fullText = taskName + '<span class = "close" onclick =
"addListener(this)">×</span>';
// calling create function from Element object
Element.createNew('li','className','tasks',0,fullText);
}
// remove function
function addListener(e){
e.parentNode.parentNode.removeChild(e.parentNode);
}
The problem is the remove function removes the last li instead of li being clicked.
Here is the JSFiddle of the problem.

store all the list items in an array.
//suppose your list items have a class name 'lists'
//create a global var
var lis = document.getElementsByClassName('lists');
initially it'll be empty,
so in your add method(in which you're appending the new list item to ul,
push the new list item in the lists array.
and in the addEvent(e) method , loop around every element in the lists array
function addEvent(e){
for(var i=0; i<lists.length; i++){
if(lists[i] === e){
//remove the lists element by using lists[i] instead of e
// and remember to pop the lists[i] and resize the lists array
}
}

Update data-attribute value on active class change

Trying to create a function that console.logs the data-attribute associated with an .active class each time the .active class changes elements.
So far I can only get the initial data attribute value of the first element's .active class. Calling the function after the .active class has changed elements produces the same results as initially calling the function.
// Variables
var activeItem = document.querySelectorAll('.active');
// Get the Data-Targ value from the .active_class
var active_href = function() {
for (i = 0; i < activeItem.length; ++i) {
var reports = activeItem[i].dataset.targ;
console.log('data-targ of .active is: ' + reports);
}
};
In reply to comments, this is how I am initially attaching the .active class.
It is being attached to the first child of the parent container.
(essentially, the first li of the ul it is contained in)
var first_child = ul.children[0];
var active = first_child.classList.add('active');
So, the active_href isn't calling the dynamically updated .active class placement along the ul > li chain that happens through Next and Previous buttons containing the event handlers that add and remove the active class.

Custom JS/CSS select alternative without jquery

I am trying to make a custom select just like this, but without jquery (I just dont want to import a whole new library for one single thing). I made it until this, but I dont know how I can make the selection with regular JS. How can I select something from the list?

If you just want to show the selected item in the dropdown,
You need to wrap the text to be displayed inside a <span> as follows
<div class="label"><span>Select Element</span><b class="button">▾</b>
</div>
Then you can change it's innterHTML to display the selected item using the following js:
var dd = document.querySelector('.label span');
var options = document.querySelectorAll('div.hidden ul li');
for (var i = 0; i < options.length; i++) {
options[i].onclick = select;
}
function show() {
var selectbox = document.getElementById("options");
if (selectbox.className == "hidden") {
selectbox.setAttribute("class", "visible");
} else {
selectbox.setAttribute("class", "hidden");
}
}
function select() {
dd.innerHTML = this.innerHTML;
}
Demo

Listen to clicks on your div#options. Demo
function choose(ev, el) {
var options = el, target = ev.target,
value = ev.target.innerHTML;
options.setAttribute('class', 'hidden');
options.parentElement.querySelector('.label').innerHTML = value;
}
<div id="options" class="hidden" onclick='choose (event, this);'>
Side notes. I don't recommend to use inline handlers. Use addEventListener instead.

You need to define an onclick handler of your li elements. Either in HTML, or in JS by looping through children of div container with li elements http://jsfiddle.net/rWU5t/2/
If you want fancy item highlights on mouse hover, you also need to define onmouseover and onmouseout handlers.

Remove hidden elements from cloned element

There are some elements that are hidden in this web page. Now if I want to find the hidden elements:
var node = jQuery('body')[0];
$(node).find(":hidden").remove();
This removes the hidden elements from the main node (which further changes the layout of the page). What I want to do is to copy(clone) the elements which are not hidden. For which I am trying this:
var clone = node.cloneNode(true);
$(clone).find(":hidden").remove();
But this removes all the elements inside the clone and not just the hidden elements (as expected, since its not in the dom). What's the best possible way to remove hidden elements from the clone.

I assume the issue is that until your clone is re-inserted into the DOM, then all of it is being considered hidden.
Maybe you could mark the hidden elements for removal first, then clone and then remove the marked elements:
var $node = ... ; // jQuery object of node to be cloned
$node.find(':hidden').addClass('markedForRemoval');
var $clone = $node.clone();
$clone.find('.markedForRemoval').remove();
// tidy up:
$clone.find('.markedForRemoval').removeClass('markedForRemoval');
$node.find('.markedForRemoval').removeClass('markedForRemoval');
demo: http://jsfiddle.net/BYossarian/6ysq8/

Sometimes the :visible selector will not be enough, and you will also want a selector for styles with height:0px, since display:none; and height:0px; are not equivalent.
Before cloning, we need to mark the elements as visible or invisible, because once cloned, the clone is in a variable, but not on the page, so everything inside it will qualify as :hidden. (Bonus: Let's make this as efficient as possible, by not hijacking the class or id fields, and instead using a custom data-attribute.)
Identify truly hidden elements:
$(node).find(':hidden').attr('data-hidden', 'true');
$(node).find('
*[style*="height:0px"],
*[style*="height: 0px"]
').attr('data-hidden', 'true');
Deep clone the node:
var clone = node.clone(true, true);
Remove hidden elements:
clone.find('*[data-hidden="true"]').remove();

I would stick to jQuery clone. My method is kinda rough, but it works.
<div class="bla" >
<span class="hidden">hidden</span>
<span class="hidden">hidden</span>
<span class="hidden">hidden</span>
<span > visible </span>
</div>
So, first, clone the parent.
var a = $('.bla').clone()
Then clone the visible children.
var b = $('.bla > :visible').clone() ;
Then add them to each other.
a.html(b)
The whole thing will be like so:
var a = $('.bla').clone()
var b = $('.bla > :visible').clone() ;
a.html(b)
Here is an example : http://jsfiddle.net/4Dky9/1/

var clone = node.cloneNode(true);
var hiddenElements = clone.querySelectorAll('.hidden'); // if hidden elements are applied the css class hidden
for(var i = 0; i < hiddenElements.length; i++){
clone.removeChild(hiddenElements[i])
}
If there is no hidden class, iterate through all the child elements and check for the display property.
var children = clone.childNodes;
for(var i = 0; i < children.length; i++){
if(children[i].style && children[i].style.display == 'none'){
clone.removeChild(children[i]);
}
}

try using :
$(clone).children(':hidden').remove();