Finding the right child and removing it

I've got some code I'm editing and I'm having trouble traversing the dom - javascript is not my strong suit. The original code uses jquery.

The code is processing a set of files and wraps a link around the file info if it's a successful upload. One of the "children" is a spinner to show that something is happening. I want to find it and delete it.

I'm pretty sure that I don't want to be using .each() but it does let me get down to the spinner - what's the best way to test for it when I get there?

Something else uses the $(data.context.children()[index]) - I've just grabbed that as a starting point. There's probably a better one.

console.log($(data.context.children()[index]));
                $(data.context.children()[index]).each(function () {

                    $(this).children().each(function () {
                        //console.log(this);
                        $(this).children().each(function () {
                            console.log(this);
                            console.log($.type(this));
                            //this.remove(":contains('owSpinner')");
                        });
                    });
                });

Code (javascript):

You can see it in action at , upload anything, you won't break anything.

 

Is that all the code is doing? You are basically built your own traversing method where you are using each() to go through everything and then using it again for sub-elements the best I can tell.

I mean if you are literally just trying to remove the owSpinner element, you could just do:

$('.owSpinner').remove();

Code (javascript):

If there are multiples on the page and you just want to remove the one within the id="files" section, do this:

$('#files .owSpinner').remove();

Code (javascript):

If there is a unique spinner for each upload, you want to remove it for just one upload, and data.context.children[index] is the reference to the file you want to remove it for, this should work:

$(data.context.children()[index]).find('.owSpinner').remove();

Code (javascript):

Maybe I'm not understanding, but it looks like you are overcomplicating it possibly.

 

That would be too easy... I need to remove each instance of the spinner one by one and I've got nothing solid to use as an id.

I've ended up with this - because the spinner is the only image

var imgList = data.context.find('img');
                imgList.each(function(){
                   $(this).remove();
                });

Code (javascript):

 

Assuming the owSpinner class is intact, why wouldn't my first example work?

$('.owSpinner').remove();

Code (javascript):

That will remove every instance of it. The way jQuery works, every match is already iterated over (no need for each()).

Even if you needed imgList to stay intact, with a list of them for some reason beyond .each(), you could still do this:

var imgList = data.context.find('img');
imgList.remove();

Code (javascript):

 

Your last one was the closest to what I needed, and my original starting point but I couldn't get that to work.

I've got people uploading up to 25 images and I want them to be able to see that they're still working as each image gets uploaded, ocr scanned, and the text saved to the database. The success / completed handler of the final ajax call removes the relevant spinner. There's a stack of minified code that I don't want to delve into so have to be content with skirting about the edges.