We Keep Coding

How to remove the all child classes from the parent in JavaScript

I want to remove the bootstrap child classes row from the parent element .But not working for me showing the errors.
the code is
if(document.getElementById(v)){
console.log(v)
document.getElementById("mapper").removeChild(document.getElementsByClassName("row"))
//document.getElementById("mapper").classList.remove('row');
}

Considering element with id="mapper" is your parent element and you want to remove children's row class. Try this :
var mapper = document.getElementById("mapper").children;
for(i=0; i<mapper.length;i++) {
mapper[i].classList.remove("row")
}

Add style to child element inside target

Currently I have a script that adds a display:block to the target element by matching the ID.
document.getElementById(id).style.display = 'block';
...But i now want to change that so that it add's the style or class to a child DIV element.

You can grab your child element by using this javascript code:
document.getElementById(id)[0].style.display = 'block';
It's just like accessing a certain item inside of an array.

Use jQuery's .css() to add some style and .addClass() to add any class to the target element.
Reference :
CSS
addClass
Hope this helps.

select html with native javascript

I want to toggle a class to the html tag element. I've made it work with the body element but I cannot find the solution to also toggle a class to the html tag.
document.querySelector('[data-menu-mobile]').addEventListener('click', function(){
document.body.classList.toggle('nav-main-mobile-open');
document.html.classList.toggle('html-color-fill');
});
I know this seems to be wrong:
document.html.classList.toggle('html-color-fill');
What is the correct way to do this?

There's no document.html object, to get to the root element you should use document.documentElement.
document.documentElement.classList.toggle('html-color-fill')

This should work:
var elements = document.getElementsByClassName("myclass");
//iterate through all found elements
Array.prototype.forEach.call(elements, function(element) {
element.className = "html-color-fill";
//or remove class with:
//element.className = "";
});

Adding CSS styles to injected DOM elements

I am using javascript to inject a few DOM elements into the page. I am able to inject a single DOM element and apply CSS style to it:
var $e = $('<div id="header"></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
Problem: If I have nested elements within $e, how can I apply CSS styles to the parents and its children seperately?
var $e = $('<div id="header"><div class="header-content"><span class="title"></span></div></div>');

As you have applied class to div inside parent element you can simply create a style to that class header-content and apply it.
In order to apply styles dynamically you can simply add class for individual elements like this
$('#id-of-element').addClass("header-content");
you can also find elements inside parent element like the one below
$e.find('.header-content').css('background-color', '#ccc');

Hi you can add css to any element using .css() method... Try the following example. I have added a div inside $e and applied different style... the thing is to use the id or class of the child inside parent div...
var $e = $('<div id="header"><div id="child"></div></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
$('#child').css("background", "red");

To expand on my comments: if you need to access children regardless of any id or class, then just use $e.children().

jQuery addClass() to element generated after append()

I am trying to add a class to a newly appended DIV without using something like:
t.y.append('<div class="lol'+i+'"></div>');
Here's a better example of what I'm trying to do:
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
t.y.append('<div></div>').addClass('lol'+i);
});
Page load HTML looks like:
<div class=".slideButton0 .slideButton1 .slideButton2" id="sliderNav">
<div></div>
<div></div>
<div></div>
</div>

When you append an element through .append, it doesn't change the context of the jQuery object.
You could write it like this:
$('<div></div>').appendTo(t.y).addClass('lol'+i);
or
$('<div></div>').addClass('lol'+i).appendTo(t.y);
(these both do the same thing, simply in different orders, the second possibly being more clear)
the context of the jQuery object will be the newly created div.

t.y.append('<div></div>').addClass('lol'+i);
should be
t.y.append('<div></div>').find('div').addClass('lol'+i);
In the first case you are adding class to the div to which you are appending ..
SO the context is still the parent div and not the newly appended div..
You need to find it first inside the parent and then add the class..
EDIT
If you want to just add the class to the last appended element ... Find the last div in the parent and then add the class to it..
This will make sure you are not adding the class to all the div's every single time you iterate in the loop..
t.y.append('<div></div>').find('div:last').addClass('lol'+i);

Try this:
t.y.append($('<div></div>').addClass('lol'+i));
Fiddle: http://jsfiddle.net/gromer/QkTdq/

var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
var d = $('<div />').addClass('lol' + i);
t.y.append(d);
});

The problem is that append returns the container instead of the thing you just appended to it. I would just do the addClass before the append instead of after:
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
t.y.append($('<div></div>').addClass('lol'+i));
});
EDIT ... or, in other words, exactly what Gromer said. Beat me by five whole minutes, too. I'm getting slow.

You don't mention why you want to number the class attribute to your list items, but in the case that you are actually using them for css don't forget you have :odd and :even css selector attritbutes and also the equivalent odd/even jQuery selectors.
http://www.w3.org/Style/Examples/007/evenodd.en.html
http://api.jquery.com/odd-selector/

I didn't find anything like this. notice the class attribute!
$.each(obj, function (_index, item) {
resultContainer.append($('<li>', {
class: "list-group-item",
value: item.id,
text: item.permitHolderName || item.permitHolderId
}));
});