javascript - 隐藏已动态生成的特定DIV元素

Description字段是可选的，仅当用户单击+ Description按钮时才显示。但是，当生成另一个div时，代码将失去其应隐藏的元素的焦点，并且该按钮将不再起作用。

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

我有一个按钮来删除并添加以下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>

我知道该功能必须能够识别我在说哪个description，但是我不知道该怎么做。我试图获取按钮的父div并使用方法find()指定div，但是我无法使其工作。

自动完成功能发生相同的问题。我相信，如果我能确定自己要做的事情，那么我将两全其美。

最佳答案

根据您的评论，我假设您的html看起来像这样（请注意，我们使用.description而不是#description，因为它们不是唯一元素）：

<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>

我们只需要使用.item-wrapper查找父源e.target来引用事件的来源，然后搜索子级.description：

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

根据您添加的示例html，以下内容也应无需修改即可工作：

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

也可以只使用this：

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

在所有情况下，关键部分是parents(".item-wrapper")。

关于javascript - 隐藏已动态生成的特定DIV元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32549747/