Develop Reference

removeClass & addClass jquery

I am relatively new to jquery and try to solve the following issue
I want to build a tree diagram, cf.
When an item in the first category is clicked, the second category (in div #category_2) pops-up. The same for the 3rd category. Every subsequent click on category 1 or 2 should remove the appended 2nd and 3rd item and append the chosen item from the 2nd and 3rd category.
Here is what I tried at the example of opening an item in category 3 (=subMenu2):
function makeType(subMenu2, root) {
if (typeof root === 'undefined') {
root = $('#category_3');
}
var ul = $("<ul></ul>");
if (root.children().length > 0) {
root.removeClass(ul)
}
root.append(ul);
for (var k = 0; k < subMenu2.length; k++) {
var li = $("<li class='category-selection-list-item is-subleaf'></li>");
ul.append(li);
var a = $("<a href='#' data-param='" + array[array_i].subMenu[submenu_i].subMenu2[k].param + "'>" + array[array_i].subMenu[submenu_i].subMenu2[k].type + "</a>");
li.append(a);
console.log(k);
}
}
Though the removeClass element stops adding further items, it does not delete previously added items. I tried to find a suitable answer in the forum, but this did not help. So, how can I fix this issue?

To remove the previously added items, you need to empty root.
if (root.children().length > 0) {
root.removeClass('ul');
root.empty();
}

addClass("className")
removeClass("className")
if you want to hide some node, just use this:
$("#someNode").hide()

how to append array to drop down navigation bar and disable one option in it

I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
when user click in logout option under home window close.
this is Demo:https://jsfiddle.net/ov43ebko/1/
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});

I hope that this is what you wanted to achieve.
1. to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
For this, have given pointer-events:none to disable li tags as they can't be disabled using attribute disabled.
$('.css,.jscript,.jquery').css('pointer-events', 'none');
And then enabled it by setting css back to all.
$(".field").blur(function() {
$('.css,.jscript,.jquery').css('pointer-events', 'all');
c1();
});
2. to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
I may have misunderstood this point but here is what I think you wanted. Have checked first parameter value and accordingly appended the second parameter value in ul under drop down menu.
if (parseInt(removed1[0]) == 1) {
$(".masters ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 2) {
$(".css ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 3) {
$(".jscript ul").append($("<li></li>").text(removed1[1]));
}
Please refer this fiddle.

select one div and unselected another one

Working on the div's. I am doing changes that if one div is selected, it should deselect the another div.
The div's defined are in ul li
Like in every li, there is a div with same classname called as inonset. Now the div which is already selected is having a class of inonset isactive.
I am adding a onclick function on every <div class="inonset" onclick="selectme(divid)"> to select it and unselect other, but how the other will be unelected, I am lost
Here is the fiddle
Not have not added the javascript code yet, but from the code, it will clear what I am trying to do.
You will see initially one selected and others are there, i just trying to selected any other one and deselect the previous one, Hope my questions makes sense
Worst thing: I cannot use Jquery, Only Dojo or Plain Javascript
Update #1
<div class="optionsBox" align="left" id="Invoicing" onclick="chooseDiv(this);">
function chooseDiv(oObj){
var d = document.getElementsByClassName("ul li div");
alert(d.className);
It is giving me undefined and not looping over the classes
the div is having classes like
iv class="headerSelected isactive">
where isactive needs to be removed from the previous selected div and add to the newly selected Div

First u need to change on click event for this:
onclick="selectme(this)"
And then in function:
function selectme(oObj){
var d = document.getElementById("ul li div");
d.removeAttribute("class");
oObj.className = oObj.className + " otherclass";
}
It should work fine

I am not sure whether the answer is still required or not. However, posting my approach of doing it.
function removeClass(className) {
// convert the result to an Array object
var els = Array.prototype.slice.call(
document.getElementsByClassName(className)
);
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
el.className = el.className.replace(
new RegExp('(^|\\s+)' + className + '(\\s+|$)', 'g'),
'$1'
);
}
}
var elements = document.getElementsByClassName("inoneset");
for (var i = 0; i < elements.length; i++) {
(function(i) {
elements[i].onclick = function() {
removeClass("isactive");
//this.setAttribute("class", this.getAttribute("class") + " isactive");
var headerElem = this.getElementsByClassName("headerSelected")[0];
headerElem.setAttribute("class", headerElem.getAttribute("class") + " isactive");
var addressElem = this.getElementsByClassName("selDelAddress")[0];
addressElem.setAttribute("class", addressElem.getAttribute("class") + " isactive");
var footerElem = this.getElementsByClassName("footerSelected")[0];
footerElem.setAttribute("class", footerElem.getAttribute("class") + " isactive");
};
})(i);
}
Fiddle - http://jsfiddle.net/38nv5rft/18/
Reasoning
As you can see, there is a remove class function, that removes the class from the elements in the document. One can update it as per the requirement.
Then the main logic, which gets all the elements, iterate on them and bind the click function.
In click function, we are removing the inActive class from every element and then for current block, adding inActive class. Please note, as per the fiddle, I did not find the class on inoneset elements being updated, hence, commented out the code.
Important Point
Click event bubbles, hence, click on elements with showDelete and showDialog click functions will bubble the event to click event of inoneset i.e. click handler of inoneset will also be triggered. In order to stop the propagation of event to it, use event.stopPropogation() in showDelete and showDialog functions.

Shift through an unordered list and change the position of the list items inside

I am building a small app, that lets you go through people businesscards, 3d style.
Basically, I have an unordered list, containing 10 list items. Each time I press the down arrow on the left, I want to remove the first (the one at the front) and push it at the back (so it becomes the last in the list).
Also, since all of the items, except the first one, have negative transformZ values to push them back, I want to rearrange them so they come closer to the user, each time the down btn is pushed. Right now each of them has a 80*i for a transformZ value and I have no idea how to push them towards without messing up the same layout.
I tried doing something like, but unfortunately it doesn't do the trick:
btnDown.addEventListener('click', function() {
listItems[0].parentNode.removeChild(listItems[0]);
for (i=0; i<=listItems.length-1;i++) {
list.style.webkitTransform = "rotateX(0deg) translateZ(-" + (100*i) + "px)";
}
}, false);
You can also find the complete project here:
http://codepen.io/gbnikolov/pen/cbdwl
Thanks in advance, all help is much appreciated!

btnDown.addEventListener('click', function() {
listItems[0].parentNode.appendChild(listItems[0]);
// re-index list
listItems = document.querySelectorAll('#primary ul li')
for (i=0; i<=listItems.length-1; i++) {
listItems[i].style.webkitTransform = "rotateX(0deg) translateZ(-" + (80*i) + "px) translateY(-" + i*20 + "px)";
}
}, false);
You were close. Instead of removing the item, move it to the end of the node. Then re-apply the webkitTransform.
btnUp.addEventListener('click', function() {
var lastItem = listItems[listItems.length-1]
listItems[0].parentNode.insertBefore(lastItem, listItems[0]);
listItems = document.querySelectorAll('#primary ul li');
applyWebkitTransform();
}, false);
For the up button use the insertBefore() function. See: http://codepen.io/anon/pen/cAbKI

Remove a child from parent and add it as Sibling to Parent

I have a Bullet Region like
HelloHowareyou
No i am selecting are and changing to Number Bullet.
so my list should change like
HelloHowareyou
want to end the Disc bullet after second child.
want to add Third child as sibling to parent.
Want to again make Disc bullet to fourth child and add it as sibling to parent.
How can i do this.

This is actually a non-trivial and very interesting problem. However, you need to first know a couple of things:
The bullets on a list item are determined by its list; ul is for unordered lists (ie. disk bullets), and ol is for ordered lists (ie. numbered bullets).
You cannot have an li without its parent being either ul or ol.
You cannot have a ul be a direct child of a ol or vice versa (they can be children of an li though, but then they'll be sublists)
This means that every time you switch a list, you need to make sure that the item you're switching has a parent of the correct (and opposite) type, and the items before and after it are also in (separate) lists of the correct type. You will in many cases need to create those lists (or delete them, when they become empty).
Anyway, words are worthless, here's the code (I'm using jQuery, but the idea should be the same regardless of what you use):
$('li').on('click', function () {
var $listItem = $(this);
var $list = $(this).parent();
var $items = $list.children();
var itemIndex = $items.index($listItem);
var numItems = $items.length;
var curType = $list.is('ul') ? 'ul' : 'ol';
var newType = curType === 'ul' ? 'ol' : 'ul';
var $prev = $list.prev();
var $next = $list.next();
if (itemIndex === 0) {
// The item we're switching is the first Item in the list
if (!$prev.is(newType)) {
$prev = $('<' + newType + '/>');
$prev.insertBefore($list);
}
$prev.append($listItem);
} else if (itemIndex === numItems - 1) {
// The item we're switching is the last Item in the list
if (!$next.is(newType)) {
$next = $('<' + newType + '/>');
$next.insertAfter($list);
}
$next.prepend($listItem);
} else {
// The item is in the middle, we need to split the current list into 3.
$tailList = $('<' + curType + '/>');
$tailList.append($listItem.nextAll());
$tailList.insertAfter($list);
$middleList = $('<' + newType + '/>');
$middleList.append($listItem);
$middleList.insertAfter($list);
}
if (numItems === 1) {
// list used to have only one Item, so it's now empty, and should be removed.
$list.remove();
if ($prev.is(newType) && $next.is(newType)) {
// The two surrounding lists are of the same type and should be merged.
$prev.append($next.children());
$next.remove();
}
}
});
I'm using the click event on a list item to switch a list item. Here's a jsFiddle link for you to play around with the implementation and validate that everything works as expected: http://jsfiddle.net/8Z9rf/
The code can definitely be optimized for speed/performance, but I was aiming for simplicity and clarity, I hope I managed to accomplish this.