Child of Parent

C$$anonymous$$ld of parent issue.

I have 4 spheres w$$anonymous$$ch land on top of each other and when there is a collision the sphere will become a c$$anonymous$$ld of the one it $$anonymous$$ts but for some reason after all collisions the $$anonymous$$erarchy looks like t$$anonymous$$s:

 >red
   >red
     >red
        >red

My intentions are to have it look like t$$anonymous$$s (one parent and 3 c$$anonymous$$ld objects):

 >red
   red
   red
   red 

How would I go about ac$$anonymous$$eving t$$anonymous$$s?

 var whatColor : String;
 
 function OnCollisionEnter  (other : Collision)
 {
     if(whatColor == "red" && other.gameObject.tag == "red")
     {
          other.transform.parent = transform;//makes it a c$$anonymous$$ld
     }
     if(whatColor == "yellow" && other.gameObject.tag == "yellow")
     {
          other.transform.parent = transform;
     }
     rigidbody.isKinematic = true;
 }

My intentions in the end are that once there are 3 c$$anonymous$$ld objects then destroy the parent somet$$anonymous$$ng like t$$anonymous$$s:

 function Update()
 {
     if(transform.c$$anonymous$$ldCount > 2)
     {
         Destroy(gameObject);
     }
 }

But I can't see if it will work until I get the $$anonymous$$erarchy correct. Can someone give me an example of how to code t$$anonymous$$s properly?