Hide a specific DIV element that has been dynamically generated

Question

The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.

<script>
    $(document).ready(function(e){
        $(document).on('click', '#hide-desc', function(e) {
            $("#description").slideToggle();
        });
    });
</script>

I have a button to remove and add the following div:

<div class="item-wrapper">
    <div class="item-inner-wrapper">
        <!-- Among other stuff -->
        <div id="description" class="item-child-desc">
            {{ form }}
        </div>
    </div>
    <div class="item-action-button">
        <!-- Deletes item-wrapper and another button adds it -->
        <a id="delete" href="#" class="button alt small special">Remove</a>
        <a id="hide-desc" class="button alt small">+ Description</a>
    </div>
</div>

I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.

I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.

Answer 1

I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation , it's relatively simple!

Run this code snippet and see if I'm close to a solution:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item-action-button"> <a href="#" class="delete button alt small special">Remove</a> <a class="hide-desc button alt small">+ Description</a> <div class="item-child-desc">{{ form }}</div> </div> <div class="item-action-button"> <a href="#" class="delete button alt small special">Remove</a> <a class="hide-desc button alt small">+ Description</a> </div> <div class="item-action-button"> <a href="#" class="delete button alt small special">Remove</a> <a class="hide-desc button alt small">+ Description</a> <div class="item-child-desc">{{ form }}</div> </div> <div class="item-action-button"> <a href="#" class="delete button alt small special">Remove</a> <a class="hide-desc button alt small">+ Description</a> </div> <script> $(document).ready(function (e) { $(".item-action-button").on('click', '.hide-desc', function (e) { $(e.delegateTarget).find(".item-child-desc").slideToggle(); }); }); </script> <style> .item-child-desc { display: none; } </style>

The problem with using ids for event handling is that they are only ever registered with the last element with that matching id . If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag . You'd be doing yourself a disservice otherwise. Hope this helps!

Answer 2

Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):

<div class="item-wrapper">
    <div class="item-action-button">
        <a id="delete" href="#" class="button alt small special">Remove</a>
        <a id="hide-desc" class="button alt small">+ Description</a>
    </div>
    <div class="description" class="item-child-desc">
        blergh
    </div>
</div>

We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description :

$(e.target).parents(".item-wrapper").find(".description").slideToggle();

Based on the sample html you've added, the following should also work without modification:

$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();

It's also possible to just use this :

$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();

In all cases, the crucial part is parents(".item-wrapper") .