Remove all selected nodes in dynatree - javascript

I want to remove all selected nodes from dynatree? But it throws an error if you delete a folder before the child. How can i delete the list of selected nodes in order of leaf nodes first?
for (var i = 0; i < selectedNodes.length; i++) {
selectedNodes[i].remove(); //Remove
}

Related

Remove a class from list item of live collection/ HTMLCollection

I have created a to-do list, but after shifting a list item from ongoing to completed tab, the tick-mark button created using js is also shifted to completed tab.
I have coded in such a way that every list item created in ongoing tab is binded to tick-mark(class).To remove that button, we need to remove the class i.e. binded to list item.
I have tried:
var nextlist = document.getElementById("completed").getElementsByTagName("li");
var j;
for(j = 0; j < nextlist.length; j++){
nextlist[0].classList.remove("complete");
}
but it does not work.
And because this is in HTMLCollection, we cannot use querySelectorAll()
You should replace nextlist[0] to nextlist[j]
var nextlist = document.getElementById("completed").getElementsByTagName("li");
var j;
for(j = 0; j < nextlist.length; j++){
nextlist[j].classList.remove("complete");
}

How can i check KendoTreeview has Children

How can i expand kendotreeView nodes with no children?, i need help checking if parent has child node if there is one or more child i want to keep it collapsed otherwise expanded.
I used the following Jquery code and works fine but it find by text value. i rather check all node with child li and expand if no child exist.
var treeview;
treeview = $("#treeview").data("kendoTreeView");
var nodeToExpand = treeview.findByText('abc.');
treeview.expand(nodeToExpand);
is there anyways to replace the code above to collapse or expand based on that?
You can iterate over all nodes, and if any do not have children nodes, expand them like this:
var treeView = $("#treeview").data("kendoTreeView");
var nodes = treeView.dataSource.view();
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].hasChildren) {
treeView.expand(nodes[i]);
}
}

EasyUI treegrid collapseAll initially

I have used the below example to populate a hierarchical structure.
http://www.jeasyui.com/documentation/treegrid.php
When initially loaded, the tree is all expanded. IS there any setting which I am missing to load the tree initially all collapsed. I have tried "state: 'closed' in the data-options but it is not working.
If you used the "convert" filter, you can add the state property to your node
while(toDo.length){
var node = toDo.shift(); // the parent node
// get the children nodes
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.parentId == node.id){
var child = {id:row.id,text:row.name, state:'closed'};
if (node.children){
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}

getting text from selective nodes in javascript

From below HTML code I want to get all the text except that in 'text_exposed_hide' span elements.
Initially I tried to get the text from span with no class names.
But this method misses the text which is not within any span but just in div.
How can I get the required text. I need this code in pure javascript
<div id="id_4f1664f84649d2c59795040" class="text_exposed_root">
9jfasiklfsa
<span>CT:PFOUXHAOfuAI07mvPC/</span>
<span>NAg==$1ZUlmHC15dwJX8JNEzKxNDGGT</span>
dwL/L1ubjTndn89JL+M6z
<span class="text_exposed_hide">...</span>
<span class="text_exposed_show">
<span>MDmclkBPI/</span>
<span>s4B7R9hJyU9bE7zT10xkJ8vxIpo0quQ</span>
55
</span>
<span class="text_exposed_hide">
<span class="text_exposed_link">
<a onclick="CSS.addClass($("id_4f1664f84649d2c59795040"), "text_exposed");">See More</a>
</span>
</span>
</div
Edit :
I tried removing nodes with class name 'text_exposed_hidden' and then getting text from remaining nodes. Below is the code. But its not working
Control is not entering for loop. Even visibleDiv.removeChild(textExposedHideNodes[0]) is not working. I am running this in Chrome Browser 16.0
//msg is the parent node for the div
visibleDiv = msg.getElementsByClassName("text_exposed_root");
textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
for(var n = 0;n < textExposedHideNodes.legth ; n++ ) {
console.log("Removing");
msg.removeChild(textExposedHideNodes[n]);
}
return visibleDiv.innerText;
This code will collect all text from text nodes who don't have a parent with the class="text_exposed_hide" and put the results in an array.
It does this non-destructively without removing anything:
function getTextFromChildren(parent, skipClass, results) {
var children = parent.childNodes, item;
var re = new RegExp("\\b" + skipClass + "\\b");
for (var i = 0, len = children.length; i < len; i++) {
item = children[i];
// if text node, collect its text
if (item.nodeType == 3) {
results.push(item.nodeValue);
} else if (!item.className || !item.className.match(re)) {
// if it doesn't have a className or it doesn't match
// what we're skipping, then recurse on it to collect from it's children
getTextFromChildren(item, skipClass, results);
}
}
}
var visibleDiv = document.getElementsByClassName("text_exposed_root");
var text = [];
getTextFromChildren(visibleDiv[0], "text_exposed_hide", text);
alert(text);
If you want all the text in one string, you can concatenate it together with:
text = text.join("");
You can see it work here: http://jsfiddle.net/jfriend00/VynKJ/
Here's how it works:
Create an array to put the results in
Find the root that we're going to start with
Call getTextFromChildren() on that root
Get the children objects of that root
Loop through the children
If we find a text node, collect its text into the results array
If we find an element node that either doesn't have a className or who's className doesn't match the one we're ignoring, then call getTextFromChildren() recursively with that element as the new root to gather all text from within that element
Is this what you're looking for?
/*Get Required Text
Desc: Return an array of the text contents of a container identified by the id param
Params:
id = Container DOM object id
*/
function getRequiredText(id)
{
/*Get container, declare child var and return array*/
var el = document.getElementById(id),
child,
rtn = Array();
/*Iterate through childNodes*/
for(var i = 0; i < el.childNodes.length; i++){
/*Define child*/
child = el.childNodes[i]
/*If node isn't #text and doesn't have hidden class*/
if(child.nodeName !="#text" && child.className != "text_exposed_hide")
rtn.push(child.textContent);
}
/*Return results*/
return rtn;
}
This will go through all childNodes, including nested childNodes and place all text into an array. if you want to exclude nested children replace the "if" statement with.
if(child.nodeName !="#text" && child.className != "text_exposed_hide" && child.parentNode == el)
Instead of removing the node, why not set its innertext/html to empty string:
//msg is the parent node for the div
visibleDiv = msg.getElementsByClassName("text_exposed_root");
textExposedHideNodes = visibleDiv.getElementsByClassName("text_exposed_hide");
for(var i = 0;i < textExposedHideNodes.legth ; i++ ) {
//store to temp for later use
textExposedHideNodes[i].txt = textExposedHideNodes[i].innerHTML;
textExposedHideNodes[i].innerHTML = '';
}
return visibleDiv.innerText;

How can I get the indices of children in a HTML ul sortable list, using jQuery/javascript?

I have a list that is dynamically populated, I want to get the indices of children of that list.
The list is an unordered sortable list, created using jQuery.
Here is the code:
$(function getIndex(){
var i=0;
for (i = 0; i < $("#questionList").length; i++)
questionOrder[i] = $("#questionList").children().index(); //not working
});
try this:
$(function getIndex(){
var i=0;
for (i = 0; i < $("#questionList").length; i++)
questionOrder[i] = $("#questionList").children().get(i).index();
});
You have to get the specific child in that children array and then get the index

Categories

Resources