javascript - 删除 dom 加载后创建的动态元素

Question

我有一系列字段集元素，当其中的所有列表项都不可见时，这些元素会被隐藏。问题是我想在字段集滑动并隐藏后实际删除它们，但我很难让它工作。

$(document).ready(function () {
    $('body').on("click", ".readBtn", function (e) {
        var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

        $('#chapter_'+chapterid).slideUp(function () {
          if (!$(this).is(":visible") 
             && !$(this).siblings("li").is(":visible")) {
            // Hide `fieldset`
            var parent = $(this).closest("fieldset");
            parent.slideUp();
            parent.remove();
          }
        });
    });
});

button.readBtn {
    margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 1
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_9">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_9">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 2
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_10">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_10">
                Mark as Read
            </button>
        </li>
        <li class="chapter" id="chapter_12">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_12">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>

我读到您不能使用 jquery.click 调用来删除页面加载后创建的元素，所以这就是我使用 on call 的原因。但我无法让它发挥作用。

Answer 1

尝试

$(document).ready(function () {
    $('.readBtn').click(function () {
        var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

        $('#chapter_'+chapterID).slideUp(function() {
          if (!$(this).is(":visible") 
             && !$(this).siblings("li").is(":visible")) {
            // hide `fieldset`
            // remove `fieldset` if all `li` siblings _not_ visible ,
            // at `.hide()` `complete` callback
            $(this).closest("fieldset").hide(function() {
              $(this).remove()
            })
          }
        });

    });
});

$(document).ready(function () {
$('.readBtn').click(function () {
    var chapterID = $(this).attr('id').replace(/[A-Za-z_]+/g, '');

    $('#chapter_'+chapterID).slideUp(function() {
      if (!$(this).is(":visible") 
         && !$(this).siblings("li").is(":visible")) {
        // hide `fieldset`
        $(this).closest("fieldset").hide(function() {
          $(this).remove()
        })
      }
    });

});
})

button.readBtn {
    margin-left: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 1
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_9">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_9">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>
<fieldset class="story">
    <legend>
        <a href="#" target="_blank">
            Title 2
        </a>
    </legend>
    <ul>
        <li class="chapter" id="chapter_10">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_10">
                Mark as Read
            </button>
        </li>
        <li class="chapter" id="chapter_12">
            <a  href="#" target="_blank">
                Chapter Title
            </a>
            <button class="readBtn" id="readBtn_12">
                Mark as Read
            </button>
        </li>
    </ul>
</fieldset>