Remove dynamic elements that were created after the dom was loaded

Question

I have a series of fieldset elements that are hidden when all of the list items inside them are not visible. The problem is I want to actually remove the field sets after they slide up and are hidden but I'm having trouble getting that to work.

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

I've read that you can't use the jquery.click call in order to remove an element that was created after page load, so that's why I went with using the on call. But I'm having trouble getting it to work.

Answer 1

This is what I would do:

$(document).ready(function () {
    $('body').on("click", ".readBtn", function (e) {
        liEl = $(e.currentTarget).parent();
        var chapterID = $(e.currentTarget).attr('id').split('_').pop();

        $('#chapter_'+chapterID).slideUp(function () {
          if (!liEl.is(":visible") 
             && !liEl.siblings(":visible").length > 0) {
            // Hide `fieldset`
            var parent = liEl.closest("fieldset");
            parent.slideUp();
            parent.remove();
          }
        });
    });
});

http://jsfiddle.net/jplato/zp91wzc0/1/

Answer 2

Try

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