We Keep Coding

Remove all #div id from domtree with class .selected

How to remove all divs with id #divs with class .something with vanilla javascript.
For example:
function removeEl() {
var removeEl = document.querySelectorAll('.selected');
if (removeEl.length > 0) {
for (var i = 0; i < removeEl.length; i++) {
var elem = document.getElementById("box1");
elem.remove();
}
}
}
This will delete all div box1 but I want to delete all box1 with class .selected

Simply use:
for (var i = 0; i < removeEl.length; i++) {
removeEl[i].remove();
}
You already selected all elements which you want to remove. So it's not necessary to select it again with a given id.

function removeEl() {
var removeEl = document.querySelectorAll('.selected');
if (removeEl.length > 0) {
for (var i = 0; i < removeEl.length; i++) {
//var elem = document.getElementById("box1");
removeEl[i].parentNode.removeChild(removeEl[i]);
}
}
}

todolist double click to add class?

I am making a todo list... When the task is finished i need to be able to click it and then add a class to that item... It works but I have to double click.. Any suggestions?
list.onclick = function() {
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++) {
list[i].onclick = function() {
if (!this.classList.contains("checked") || this.classList.contains("checked")) {
this.classList.add("checked");
} else {
this.classList.remove("checked");
}
}
}
}

As I understand purpose of this function is to check or uncheck list element each time user clicks on it. For this purpose, first of all we need to identify if 'class' exists or not and remove it. In other cases just add that 'class' to classList attribute.
list.onclick = function()
{
var list = document.getElementsByTagName('li');
for (var i = 0; i < list.length; i++)
{
list[i].onclick = function()
{
if (this.classList.contains("checked")
{
this.classList.remove("checked");
}
else
{
this.classList.add("checked");
}
}
}
}

move class between elements with pure JavaScript without using jQuery

Can you help me here with this ordinary js code as I want to move the className "active" from item to another item including removing all elements class and keep it with the this.item
function moveClass(){
var item = document.getElementsByClassName('item');
for(var i = 0 ; i < item.length ; i++){
var items = item[i];
items.onclick=function(){
items.classList.remove('active');
this.classList.add('active');
}
}
}
window.addEventListener('load',moveClass)

You can use document.querySelector('.item.active') to find the current active item, and remove .active from it. Afterwards, just assign active to the clicked item (fiddle):
function moveClass() {
var items = document.getElementsByClassName('item');
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
var prevActive = document.querySelector('.item.active');
prevActive !== null && prevActive.classList.remove('active');
this.classList.add('active');
}
}
}
document.addEventListener('DOMContentLoaded', moveClass);

Loop through each item and remove the active class from it. Then add active to this (the item being clicked)
function moveClass(){
var items = document.getElementsByClassName('item');
for(var i = 0 ; i < items.length ; i++){
items[i].onclick=function(){
for (var j = 0; j < items.length; j++) {
items[j].classList.remove('active');
}
this.classList.add('active');
}
}
}
window.addEventListener('load',moveClass)
http://jsfiddle.net/zutqwdf8/

Is it possible to delete/remove an entire "select" element, after you've emptied the options with .remove()?

Like, after you've emptied it with this:
var select = document.GetElementById("selector");
var length = select.options.length;
for (i = 0; i < length; i++) {
select.remove(select.options[i]);
}
Is it possible to remove the entire node by using:
select.parentNode.ChildNodes[1].remove();
afterwards, keeping in mind that I have the function remove() somewhere else, as followed:
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = 0, len = this.length; i < len; i++) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
This doesn't seem to work for me. I can empty the select, but not remove it.

Try this:
var select = document.getElementsByTagName('select')[0];
if (select.parentNode.removeNode)
select.parentNode.removeNode(select);
else
select.parentNode.removeChild(select);
Demo

Getting the index of the current element and change his styles

I have a function whose destination is to work onClick event.
So, we have for example 4 Span elements and 4 Div elements.
The Spans are Tabs-buttons which I would like to "open" those Divs.
The 1st Span onClick would (open) change the style.display of the 1st Div in "block", from "none", and so on for the next Spans.
This piece of code works very well, but it changes only the design of elements.
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
}
I've tried to add the code below into my function to achieve what I want, but It does not work.
var getIndex = function(s) {
for (var index = 0; s != s.parentNode.childNodes[index]; index++);
return index;
}
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else {
supDivs[d].style.display = "none";
}
}

I'm not exactly sure what you're trying to do, but one thing I noticed is this:
var getIndex = function(s) { /* .... */ }
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else { /* ... */ }
}
This code is comparing getIndex to d, which means it's comparing an integer (d) to the function getIndex, instead of the result of the function call getIndex(spans[d]) (which is an integer, like d).
But what I think you're really trying to do, is getting the index of the clicked <span> so you can show the <div> with the matching index (and hide the rest). To achieve this, the code could be changed like so:
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
var index;
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
if (s == spans[i])
index = i;
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
for (var d = 0; d < supDivs.length; d++) {
if (index == d) {
supDivs[d].style.display = "block";
} else {
supDivs[d].style.display = "none";
}
}
}
Instead of the function getIndex, this just saves the correct index inside the first for loop.
There are many more improvements that could be made to this code, like rewriting it so you don't need that ugly s.parentNode.parentNode.parentNode.parentNode.parentNode and working with CSS classes instead of manually setting the style. But I'll leave that to the reader.