Develop Reference

How to Edit and Remove item from sessionStorage

This code to store items in sessionStorage so i want to add, edit ,
remove item and remove all my code worked well except remove item i
don't know the reason
function clearItem () {
for (var i = 0; i < sessionStorage.length; i++) {
var a = sessionStorage.key(i);
var b = sessionStorage.removeItem(a);
}
}
here's my code in jsfiddle

function clearItem () {
for (var i = 0; i < sessionStorage.length; i++) {
var a = sessionStorage.key(i);
sessionStorage.removeItem(a);
}
}

You have several problems:
You have indicated that you only want to remove the phone number from sessionStorage here. In this case, there is no need to loop over sessionStorage at all. Just remove that one entry:
sessionStorage.removeItem("number");
In looking over the Fiddle that you provided, your code was quite disorganized and didn't make much logical sense from a "flow" perspective. I have modified it to a working version available here. The biggest issues with your code was that you are trying to loop over sessionStorage when saving and retrieving the values, when what you should have been doing is simply creating key/value pairs of data and accessing the data with the key names you've created.
Read about sessionStorage here

Trying to make sense of "this" in my javascript code (one thing works, the other doesn't)

I've been trying to learn javascript by refactoring some Jquery examples in a book into javascript. In the following code I add a click listener to a tab and make it change to active when the user clicks on the tab.
var tabs = document.querySelectorAll(".tabs a span");
var content = document.querySelectorAll("main .content li");
for (var tabNumber = 0; tabNumber <= 2; tabNumber++) {
tabs[tabNumber].addEventListener("click", function (event) {
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
}
tabs[tabNumber].classList.add("active");
for (var i = 0; i < content.length; i++) {
content[i].innerHTML = "";
}
event.preventDefault();
});
}
This returns an undefined error when I run it. However, I tried replacing tabs[tabNumber].classList.add("active") with this.classList.add("active") and it worked.
Why doesn't the previous code work? As far as I can see they are referring to the same thing, and tabs[tabNumber] should work since at that point in the code it is tabs[0].

If use this, I think it's better and a more polished solution. If you still want to use tabNumber, it's probably evaluating to 3 in every click callback, because it's the number after the last iteration, and you don't have a tabs[3] position.
So, you just have to make a closure of the tabNumber variable.

I guess other answers told you why tabs[tabNumber] does not work (because it comes from the score of the for loop and so, is always equal to the greater value of tabNumber).
That's why I would recommend using a .forEach loop. Careful though because it doesn't work on arrays of DOM nodes produced by document.querySelectorAll(), but you can use:
// ES6
Array.from(document.querySelectorAll('...'))
// ES5
[].slice.call(document.querySelectorAll('...'))
Anyway, I made a simplified working demo of your code.
Note that I save the currently active tab in a variable, to prevent another for loop. You could also do:
document.querySelector('.active').classList.remove('active')
But I like to reduce the amount of DOM reading.
Good luck for your apprentissage, re-writing some jQuery code into Vanilla JS seems like a good method, and you might acquire a far better comprehension of JavaScript.

It appears that getElementsByTagName('table') doesn't work properly in IE11. Is there a work around?

var tables= dragContainer.getElementsByTagName('table');
The array returned by this call doesn't have the rows array filled out every time. This works properly in Chrome and IE9, but not in IE11.
Is there a work around I can use? I tried doing the following but it doesn't appear to be working. I'm not quite a javascript expert to tell exactly why but I am going to keep digging for a bit.
I could just pull the rowNodeList and store it, but I want to override the tables[j].rows because there is a large amount of code expecting this sort of structure.
var tables= dragContainer.getElementsByTagName('table');
for (i = 0; i < tables.length; i++) {
var rowNodeList = tables[j].getElementsByTagName('tr');
tables[j].rows.length = 0; //clear array
for (k=0; k < rowNodeList.length; k++) {
tables[j].rows[k] = rowNodeList[k];
}
}
EDIT: I just realized since this code is FOSS, I can just link to it.
https://github.com/dbunic/REDIPS_drag/blob/master/redips-drag-source.js#L334

parentNode not deleting properly

my javascript knowledge is pretty poor. I'm trying to run a script with greasemonkey on http://www.twitch.tv/directory/all to remove certain kinds of streams from the list based on an image provided next to a shot of the stream(like picture of hearthstone, minecraft etc.). Here's the code:
//what you want to remove
var killIt=["http://static-cdn.jtvnw.net/ttv-boxart/Hearthstone%3A%20Heroes%20of%20Warcraft-138x190.jpg", "http://static-cdn.jtvnw.net/ttv-boxart/League%20of%20Legends-138x190.jpg", "http://static-cdn.jtvnw.net/ttv-boxart/Minecraft-138x190.jpg"];
var el = document.getElementsByClassName("boxart");
//runthrough elements killing certain ones
for (i = 0; i < el.length; i++) {
for (j = 0; j < killIt.length; i++) {
if (el[i].src == killIt[j]) {
var ely = el[i].parentNode;
ely.parentNode.removeChild(ely);
}
}
}
So i tried it on w3schools site and the code works fine, but when i try to actually run it in twitch.tv it does nothing(seemingly).
Am i missing something about parent nodes? Or greasemonkey?

The second for should be j++. Also you can use .indexOf to test if the URL is listed in the array to avoid a other for loop.

JS For Loop Stopping Early after Calling Function

I have a Javascript Array that holds the contents of a page. In order to draw all the objects in the right places when the page loads I loop over the array and pull out the elements. This worked very well until I allowed the objects to have children within them.
The current array structure is
0-> {elements=[] frame={I keep the frame attributes here with key value pairs}}, 1-> {elements=[] frame={}}
However, I just started adding sub-elements to the elements array in each object. So now I have to loop through/draw each element, check to see if there are any children and if so then I have to draw them too.
The problem I'm having is that after I loop through the first 0 object and it's children the for loop stops running. Is it because I'm calling the same function multiple times? I've done that before so I don't think that's what is happening.
this.run_loop = function (spawn, dom) {
console.log(spawn)
alert(spawn.length)
for (i = 0; i < spawn.length; i++) {
console.log(spawn[i])
//alert("i one")
var newdom = dom + "_" + i;
this.synthesize_elements(spawn[i], dom, newdom)
if (spawn[i].hasOwnProperty('elements')) {
//alert("FOUND")
var newarray = spawn[i]['elements'];
if (newarray.length > 0) {
this.run_loop(newarray, newdom)
}
}
}
}

This is a little old but I encountered a similar issue and found my way here, but I figured it out and thought I'd post the solution if anyone else came across this. The issue in my case (and it looks like in your case as well though I can't be sure) was in the declaration of the for loop:
for (i = 0; i < spawn.length; i++)
You're not declaring that i is a new var. so if anything inside the
this.run_loop(newarray, newdom)
function also manipulates a counter variable called i that isn't declared a new var, it will also change the one in your outer scope, and kick you out of the loop if it goes over the length of spawn
just always declare:
for (var i; i< spawn.length; i++)
in your loops or make sure your counters are unique.