Check if an element is a child of a parent

Question

I have the following code    lt html gt   lt head gt       lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt   lt  head gt    lt div id  hello  gt Hello  lt div gt Child-Of-Hello lt  div gt  lt  div gt   lt br   gt   lt div id  goodbye  gt Goodbye  lt div gt Child-Of-Goodbye lt  div gt  lt  div gt    lt script type  text javascript  gt   lt  -- function fun evt        var target     evt target           if     div hello   parents target  length            alert  Your clicked element is having div hello as parent              document  bind  click   fun   -- gt   lt  script gt    lt  html gt    I expect only when Child-Of-Hello being clicked     div hello   parents target  length will return  0   However  it just happen whenever I click on anywhere   Is there something wrong with my code

User · Answer

has   seems to be designed for this purpose  Since it returns a jQuery object  you have to test for  length as well   if     div hello   has target  length       alert  Target is a child of  hello

User · Answer

If you are only interested in the direct parent  and not other ancestors  you can just use parent    and give it the selector  as in target parent  div hello     Example  http   jsfiddle net 6BX9n   function fun evt        var target     evt target           if  target parent  div hello   length            alert  Your clicked element is having div hello as parent              Or if you want to check to see if there are any ancestors that match  then use  parents     Example  http   jsfiddle net 6BX9n 1   function fun evt        var target     evt target           if  target parents  div hello   length            alert  Your clicked element is having div hello as parent

User · Answer

In addition to the other answers  you can use this less-known method to grab elements of a certain parent like so      child    parent      In your case  that would be  if    event target   div hello   0   console log    event target tagName  is an offspring of div hello      Note the use of commas between the child and parent and their separate quotation marks  If they were surrounded by the same quotes     child  parent      you d have an object containing both objects  regardless of whether they exist in their document trees

User · Answer

If you have an element that does not have a specific selector and you still want to check if it is a descendant of another element  you can use jQuery contains       jQuery contains  container  contained     Description  Check to see if a DOM element is a descendant of another DOM element    You can pass the parent element and the element that you want to check to that function and it returns if the latter is a descendant of the first

User · Answer

You can get your code to work by just swapping the two terms   if    target  parents  div hello   length      You had the child and parent round the wrong way

User · Answer

Ended up using  closest   instead     document  on  click   function  event        if   event target  closest   CustomControllerMainDiv   length    1      alert  element is a child of the custom controller

User · Answer

Vanilla 1-liner for IE8    parent     child  amp  amp  parent contains child     Here  how it works    x000D   x000D  function contains parent  child    x000D    return parent     child  amp  amp  parent contains child   x000D    x000D   x000D  var parentEl   document querySelector   parent    x000D      childEl   document querySelector   child   x000D       x000D  if  contains parentEl  childEl     x000D    document querySelector   result   innerText    I confirm  that child is within parent el   x000D    x000D   x000D  if   contains childEl  parentEl     x000D    document querySelector   result   innerText      and parent is not within child   x000D    x000D   lt div id  parent  gt  x000D     lt div gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt td gt  lt span id  child  gt  lt  span gt  lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div id  result  gt  lt  div gt  x000D   x000D   x000D

[javascript] Check if an element is a child of a parent

Examples related to javascript

Examples related to jquery