SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    get element and hide its childs

    Hi,

    I have html like this

    HTML Code:
    <div class="nH" id="ga"></div>
    <div class="nH" style="width:225px">
        <div class="nH"></div>
        <p>Stuffs</p>
    </div>
    I need to hide (display:none) all childs of the element <div class="nH" style="width:225px">

    How could I do that in plain javascript?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is how i would do it

    HTML

    Code HTML4Strict:
    <div id="nH" class="nH" style="width:225px">
        <div class="nH"></div>
        <p>Stuffs</p>
    </div>

    Code JavaScript:
    if (document.all){ // IE Only
        var childNodes = document.all.nH.childNodes;
    } else {
        var childNodes = document.getElementById('nH').childNodes;
    }
     
    if (childNodes != null){
        for(var i=0, max=childNodes.length; i<max; i++){
            if (childNodes[i].nodeName.toLowerCase() == 'div'){
                childNodes[i].style.display = 'none';
            }
        }
    }

    Hope that helps, it doesn't include an argument for <p> but im sure you could work the rest out

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Sgt. As trying to write a user script for greasemonky, to customized a website, I can't change the html as your suggestion. The html is fixed.

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function nh225(){
        var who, child, 
        nodes= document.getElementsByTagName('*');
        for(var i= 0, L= nodes.length; i<L; i++){
            who= nodes[i];
            if(who.className== 'nh' && 
              who.style.width== '225px'){
                child= who.lastChild;
                while(child!= null){
                    if(child.style) child.style.display= 'none';
                    child= child.previousSibling;
                }
                return who;
            }
        }
        return null; 
    }
    Last edited by mrhoo; Jun 12, 2010 at 11:18. Reason: format

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    
    function hideChildrenOfDivAfter( id )
    {
     var e = document.getElementById( id ), children;
    
     if( e )
      while( (e = e.nextSibling) && e.nodeName !== 'DIV' )
      ;
    
     if( e )
     {
      children = e.childNodes;
    
      for(var i in children )
       if( children[ i ].style )
        children[ i ].style.display = 'none' ; 
     }
    }
    
    </script>
    
    <p><input type='button' value='Hide' onclick='hideChildrenOfDivAfter("ga")'>
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •