1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Finding the right child and removing it

Discussion in 'jQuery' started by sarahk, Apr 29, 2019.

  1. #1
    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.
    SEMrush
    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):
    upload_2019-4-30_17-4-17.png

    You can see it in action at upload_2019-4-30_17-5-58.png , upload anything, you won't break anything.
     
    sarahk, Apr 29, 2019 IP
    SEMrush
  2. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,278
    Likes Received:
    2,599
    Best Answers:
    460
    Trophy Points:
    710
    Digital Goods:
    29
    #2
    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.
     
    digitalpoint, Apr 30, 2019 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    25,166
    Likes Received:
    3,427
    Best Answers:
    100
    Trophy Points:
    665
    #3
    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):
     
    sarahk, Apr 30, 2019 IP
  4. digitalpoint

    digitalpoint Overlord of no one Staff

    Messages:
    38,278
    Likes Received:
    2,599
    Best Answers:
    460
    Trophy Points:
    710
    Digital Goods:
    29
    #4
    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):
     
    digitalpoint, Apr 30, 2019 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    25,166
    Likes Received:
    3,427
    Best Answers:
    100
    Trophy Points:
    665
    #5
    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.
     
    sarahk, Apr 30, 2019 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,912
    Likes Received:
    1,624
    Best Answers:
    232
    Trophy Points:
    515
    #6
    Meanwhilst I'm sitting here going "WTF does walking the DOM have to do with any of this?" -- but I suspect with all those endless "DIV for nothing", static style in the markup, etc, etc. there's a significant amount of things "wrong" with it.

    Could you just apply the spinner as a background-image behind all those endless elements, so that when the image is loaded and displayed it is hidden UNDER it? This LOOKS like stuff that would be client-side generated (or should be) so why would you need to be hooking them with querySelector methodology each and every blasted time... what does the event handler for the load complete look like?

    Again, I suspect jQ has created another inept / ignorant bloated mess out of something simple... though without seeing what it is this is actually supposed to be doing and/or more of the code, I'm not even sure what this mess is trying to do, I just know that if I had that markup and that JavaScript, I'd junk it and start over...

    WITHOUT the dipshit dumbass ignorant framework and its mentally enfeebled broken bloated methodologies.
     
    deathshadow, May 8, 2019 IP
  7. NetStar

    NetStar Notable Member

    Messages:
    2,263
    Likes Received:
    467
    Best Answers:
    21
    Trophy Points:
    215
    #7
    This is the jquery section of the forum. His post is ontopic. Your non-stop banter about bloated frameworks is irrelevant.
     
    NetStar, Jul 6, 2019 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,912
    Likes Received:
    1,624
    Best Answers:
    232
    Trophy Points:
    515
    #8
    Went digging a couple months back for something to bear-bait with did ye?

    ... and what's wrong with actually trying to point out problems and suggest a possible better way of doing it?

    Why would the image be static in the markup? If it's scripting only, shouldn't it be added -- or removed -- by the script? Why use jquery or querySelectorAll for something that likely could be DOM walked to and should likely be nothing more than a simple class swap?

    All it has done is make the answer more convoluted, harder to understand, harder to work with, and confuse it to the point that something which likely should be three to eight lines of CSS and three lines of vanilla JS that ANYONE qualified to work on a website should understand, and resulted in throwing multiple POINTLESS lines of HTML, a dozen lines of JavaScript, AND the requirement for some library at it -- ALL to do things as incorrectly as possible.

    But again, JOE FORBID anyone DARE to point that out. That's what's wrong with you framework fanboys and the lame excuses you make up for their use!
     
    deathshadow, Jul 6, 2019 IP
  9. NetStar

    NetStar Notable Member

    Messages:
    2,263
    Likes Received:
    467
    Best Answers:
    21
    Trophy Points:
    215
    #9

    It's the JQUERY section. That's like every topic in the PHP section having a post advising to use Java instead simply because that's the preference of the individual replying. Offtopic non-sense. Redirect yourself to a forum where you can stay on topic.

    @sarahk where is the section on managing stress?
     
    NetStar, Jul 6, 2019 IP