CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsdom
user2865156
user2865156

Reputation: 311

jquery hide/show particular li child elements

I have some html like so:

<ul id = "postsList">
  <li ng-repeat="post in posts">
    <button class = "deleteButt" ng-click="delButt()">Remove</button>

   <!--hidden div I want to show/hide when the above button is pressed--> 
    <div class = "confirmDeleteBox">
    <button class = "confirmDelete" ng-click = "postDelete(post._id)">Confirm</button>
    </div>

  </li>
</ul>

So each post has a $('.deleteButt') that you click on and it should show $('div.confirmDeleteBox'), including it's child elements, but only for that particular post.

So how would I use jquery to show the hidden children of a particular li? Or to show the specific children by their class or id? I'm not sure what the best way to do this is.

Upvotes: 0

Views: 678

Answers (2)

Mark Coleman
Mark Coleman

Reputation: 40863

Mixing jquery and angularjs (esp in controllers) will result in much pain down the road. This can be done easily via angular. ngRepeat creates a child scope which allows this to work.

<ul id="postsList">
    <li ng-repeat="post in posts">
        <button class="deleteButt" ng-click="showConfirm = !showConfirm" ng-hide="showConfirm">Remove</button>
        <div ng-show="showConfirm">
            <button class="confirmDelete" ng-click="postDelete(post._id)">Confirm</button>
        </div>
    </li>
</ul>

Upvotes: 4

Nick Coad
Nick Coad

Reputation: 3694

You'd want to use jQuery's siblings() function.

$('.deleteButt').on("click", function (e) {
    $(this).siblings(".confirmDeleteBox").show();
});

More detail on this function here: https://api.jquery.com/siblings/

Upvotes: 0

Related Questions