CODEWITHSUNDEEP
javascriptjqueryangularjs
FrenkyB
FrenkyB

Reputation: 7197

DIV inside td doesn't find parent

I am using angularjs. My structure is like this (inside larger table - just showing one cell):

   <td>
    <div>
    <label>OU5NS1E2IE1L</label>
    <i class="fa fa-times" aria-hidden="true"
    ng-click="DeleteElementFromSession($event);"></i>
    </div>
  </td>

When calling DeleteElementFromSession this line of code:

$(event.currentTarget).parent()

returns DIV, which is correct. But I want to return <td> element, where DIV is inside. I don't know why, call to this doesn't return <td> element? It doesn't return anything:

$(event.currentTarget).parent().parent()

<i> is inside DIV and DIV is inside td so in my opinion, this should work, but it doesn't. Why?

Upvotes: 0

Views: 102

Answers (3)

georgeawg
georgeawg

Reputation: 48948

The browser is eliminating the <td> node from the DOM because it is not legal HTML.

The <td> node needs to be a child of node of <table> and <tr>.

   <table>
     <tr>
       <td id="tdNode1">
         <div>
            <label>OU5NS1E2IE1L</label>
            <i class="fa fa-times" aria-hidden="true"
            ng-click="DeleteElementFromSession($event);">CLICK HERE</i>
         </div>
      </td>
    </tr>
  </table>

Then the browser will include the <td> node in the DOM and elem.parent().parent() will find the <td> node.

app.controller("myVm", function($scope) {
    var vm=$scope;
    vm.DeleteElementFromSession = function(e) {
        var elem = angular.element(e.currentTarget);
        vm.id = elem.parent().parent().attr("id");
    }
});

The DEMO on JSFiddle.

Upvotes: 1

SURJEET SINGH Bisht
SURJEET SINGH Bisht

Reputation: 881

for this you need parent with closest:

   $(event.currentTarget).parent().closest('td')

Upvotes: 0

sreeramu
sreeramu

Reputation: 1223

According to Angular JS doc:

https://docs.angularjs.org/api/ng/function/angular.element

parent() - Does not support selectors

parent is from jqLite which contains some of the jQuery functions.

According to jQuery doc:

https://api.jquery.com/parent/

This method is similar to .parents(), except .parent() only travels a single level up the DOM tree.

so only one level up travels is allowed.

Upvotes: 1

Related Questions