Web Analytics Made Easy -
StatCounter is relative positioned element a childNode of its parent? - CodingForum

Announcement

Collapse
No announcement yet.

is relative positioned element a childNode of its parent?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • is relative positioned element a childNode of its parent?

    I have code that uses DOM methods to insert a div element inside another div element.
    The child div element is positioned relatively inside the parent div.
    So later I want to remove the relatively positioned div by first finding out if the parent element
    has child nodes. But I am getting an error: parent div.hasChildNodes is not a function.
    That usually means that it does not have what is being asked for.

    In the code below, the target argument is the id of the parent div element
    the part argument is the div inside to be removed (css position relative)
    js error: 'target.hasChildNodes() is not a function'

    Edit: Sorry, I neglected to do document.getElementById(target)
    where target is the element id.
    Code:
    var remove = function(target, part)
          {
            alert('part: '+part)
            if(target.hasChildNodes())
             {
               for(var i = target.childNodes.length - 1; i >= 0; i--)
                 {
                   if(target.childNodes[i].hasChildNodes)
                    {
                      if(menuList.propertyIsEnumerable(target.childNodes[i].id) && target.childNodes[i].id == part)
                        {
                          ids[ids.length] = target.childNodes[i].id;
                         }
                       target.removeChild(target.childNodes[i])
                     }
                 }
              }
          }
    Thanks for time and attention... and helpful suggestions.
    JK
    Last edited by anotherJEK; Sep 20, 2016, 07:23 PM.

  • #2
    Anything you apply from CSS or Element.style does JACK ALL to the organization of the DOM. Nothing, nada, zip, zilch, nein, bupkis.

    I have found hasChildNodes unreliable, which is why I usually check Node.firstChild instead.

    THOUGH, one thing that could be biting you here is that in most browsers, there are other nodes on the DOM besides elements. Comments, whitespace, textnodes -- all have their own DOM nodes and nodeTypes. Without seeing the markup you are trying to process it's hard to truly say, but really I would suspect that's just part of what's going on.

    Even so, I would not use the slower childnode array, waste of time and effort... and slower since you're getting a bunch of stuff involved you don't need to.

    If I'm understanding what you're trying to accomplish here, it should probably go something more like this:

    Code:
    function remove(target, part) {
    
    	alert('part: '+ part);
    	var outer = target.firstChild; 
    	
    	if (outer) do {
    		if (outer.nodeType == 1) while (outer.firstChild) {
    			if (
    				outer.firstChild.nodeType == 1 &&
    				outer.firstChild.id == part
    			) ids.push(outer.firstChild.id);
    			outer.removeChild(outer.firstChild);
    		}
    	} while (outer = outer.nextSibling);
    	
    } // remove
    Walk the DOM with nextSibling or loop while firstChild... and check your nodeType. You don't want to run any of that code on textnodes, whitespacenodes, etc, etc... and if you know it's nodeType 1 (aka an element) you know it has an ID, so you don't need that extra check. (and lose the silly "variable style declaration for nothing" unless yer gonna do function overloading.... which I generally advise against!)

    No array/nodeList indexing even needed. In Soviet Russia, the DOM walks you!

    See MDN's page on nodeTypes for more about that. When moving to using the DOM it's easy to forget that more than just elements get put on the DOM.

    https://developer.mozilla.org/en-US/.../Node/nodeType

    .. and again, there's not a blasted thing you can do from the CSS that would change the DOM... well, apart from adding generated content such as with :before and :after. THAT can add stuff to the DOM.

    But not even display:none will actually remove an element from the object tree. It's just not shown. Position:relative and position:absolute don't change the markup or the DOM, they just change where the element is drawn.

    Oh, and target would have to be the parent element, not the ID of it since you have no getElementById in your example! Likewise, not sure I'd be storing the list of ID's like that in a global.

    -- edit -- side note, if all the ID's are ALWAYS going to equal "part" -- a condition that should ONLY ever be true ONCE, why are you adding it to an array?
    Last edited by deathshadow; Sep 20, 2016, 07:45 PM.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      Oh, and even if you were to use hasChildNodes, that's a property, not a function or object method, so lose the ().

      ... and are you sure you want to flush ALL child nodes of target? Your text doesn't make that sound like what you want to do, but that's what the code you presented does. If you just want to move that one element with the matching ID (which with no pointer/handler will cease to exist if you don't store it)

      Code:
      var e = document.getElementById(part);
      e.parentNode.removeChild(e);
      // appendChild e wherever it is you want to put it back in the document.
      Last edited by deathshadow; Sep 20, 2016, 08:16 PM.
      Walk the dark path, sleep with angels, call the past for help.
      https://cutcodedown.com
      https://medium.com/@deathshadow

      Comment


      • #4
        If you just want to move an element you don't need to remove it - simply adding it to the new location automatically removes it from where it was (you'd need to clone it to add a copy leaving the original intact).
        Stephen
        Learn Modern JavaScript - http://javascriptexample.net/
        Helping others to solve their computer problem at http://www.felgall.com/

        Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

        Comment


        • #5
          Originally posted by deathshadow View Post
          Nothing, nada, zip, zilch, nein, bupkis.
          The correct German translation of “nothing” would be “nichts”.
          Stop solving problems you don’t yet have!

          Comment


          • #6
            Originally posted by felgall View Post
            If you just want to move an element you don't need to remove it - simply adding it to the new location automatically removes it from where it was (you'd need to clone it to add a copy leaving the original intact).
            There was a time when Gecko screwed that up and would actually render the element in both places -- as in it's the same element rendering twice and any changes applied to one applied to both... TECHNICALLY that should in fact be the correct behavior, but the W3C came to the conclusion that most people working in JavaScript were too stupid to have pointers work properly. I still do a manual remove out of habit since if these were PROPER pointers exhibiting the proper behaviors, you'd have to.

            But when they aren't proper pointers, have automatic collection with no explicit manual release... yeah, that's a little screwy.

            Originally posted by VIPStephan View Post
            The correct German translation of “nothing” would be “nichts”.
            Fair 'nough, I always get teh whole nichts/nicht/nein/kein thing messed up... Nothing, not, no, and none respectively, correct?

            I used to know that, my maternal grandmother was German. (My Grandfather was a war bride -- long story)... but mein Deutsch ist rostig ziemlich. (My grammar alone is probably terrifying)

            Could be worse, I could start posting in Olde Englisc... I have a better command of that than I do any other non-modern language, though High French is a close second -- but that's mostly thanks to music. I've always been fascinated by dead languages... the idea that a means of communication could just go AWOL in a handful generations is surprising if you think about it.
            Last edited by deathshadow; Sep 21, 2016, 08:10 PM.
            Walk the dark path, sleep with angels, call the past for help.
            https://cutcodedown.com
            https://medium.com/@deathshadow

            Comment


            • #7
              I am just trying to add a child element to a div element.
              Code:
              <div id="parent"> 
              <!-- <div id="child" style="position:relative;top:0;left:0">content generated by code </div>-->
              <div>
              So my original question is: is the "child" div a node of the 'parent' div. (being relatively positioned). As I have worked
              with this it appears that it is. I had some issues with the code ( see edit in original post ) that were causing the confusion.

              The code is written so the user (site visitor with a browser and a mouse and keyboard) can add or remove
              any number of child div elements to the parent, depending on the location of the mouse with respect to the
              parent div and other elements within the parent.
              There is no movement involved. I am trying to write event handlers that will be use on any of the divs and their
              contained elements, so an abstract pattern can be used and repeated for each instance of a child div. These elements
              will take on a tree structure and appearance.

              When you loop through childNodes, you have access to a number of values such as the id of the element and others.
              As far as I can see looping using nextSibling is also looping if your trying to find a particular element to process.

              So far I have not any any trouble with element.childNodes; IF there is no other problem getting in the way, like faulty
              logic.

              I want to remove elements because when they are hidden they take the same space in the parent element or page, even
              if they are absolutely positioned away from the original location.

              Comment


              • #8
                relative positioning is CSS - it has NOTHING to do with the HTML document object model.
                Stephen
                Learn Modern JavaScript - http://javascriptexample.net/
                Helping others to solve their computer problem at http://www.felgall.com/

                Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                Comment

                Working...
                X