JS SlideUp和SlideDown在列表中不起作用

Question

I have created a list dynamically in JS, with a provision to Add/Delete items. If I Delete an item from the end of the list, then subsequent Add works fine. However, if I delete an item within (not last element), then the subsequent Added item is not visible. I'm not sure I got my understanding of SlideUp, SlideDown correctly. Can someone please check the code and let me know where I'm wrong.

 function addNewInSection() { var imgCntr; var path; var fpath; var desc; var secListData = ''; selectedImageList.push.apply(selectedImageList, localImageList); localImageList = []; // After copying, reset local list var section = removeSpecials($('#pa-section-list > .active').find('a').find('#section-name').text().trim()); var count = $('#pa-section-list-data').find('#' + section).find('.list-group').find('.list-group-item').length; var id; for (imgCntr = count; imgCntr < selectedImageList.length; imgCntr++) { path = selectedImageList[imgCntr][0].trim(); fpath = selectedImageList[imgCntr][1]; desc = selectedImageList[imgCntr][2]; id = section + '-' + imgCntr; secListData = '<div style="display: none;" id="' + id + '" class="list-group-item list-item-height clearfix">' + '<img height="50" src="' + path + '" data-fpath="' + fpath + '">' + '<label id="imgdesc">' + desc + '</label>' + '<button on`click="upListItem(\\'' + id + '\\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-up"></span></button>' + '<button onclick="downListItem(\\'' + id + '\\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-down"></span></button>' + '<button onclick="deleteListItem(\\'' + id + '\\', \\'' + imgCntr + '\\')" class="btn btn-sm btn-warning pull-right"><span class="fa fa-trash"></span></button>' + '<button onclick="addImageDescription(\\'' + imgCntr + '\\');" class="btn btn-sm btn-info pull-right"><span class="fa fa-edit"></span></button>' + '</div>'; $('#pa-section-list-data').find('#' + section).find('.list-group').append(secListData); $('#' + id).slideDown(); count = $('#pa-section-list-data').find('#' + section).find('.list-group').find('.list-group-item').length; } recordSections(); // Send to server } function deleteListItem(id, imgcnt) { bootbox.confirm("Do you really want to delete?", function (result) { if (result) { $('#' + id).slideUp("slow", function () { selectedImageList.splice(imgcnt, 1); $('#' + id).remove(); recordSections(); }); } }); } 

Answer 1

I believe that's because your script might generate same id, while jQuery's Id selector can only select the first Id found. You don't have to use Id for your object selector, instead, use this parameter as a reference.

You can change this line :

secListData = '<div style="display: none;" id="' + id + '" class="list-group-item list-item-height clearfix">'
                + '<img  height="50" src="' + path + '" data-fpath="' + fpath + '">'
                + '<label id="imgdesc">' + desc + '</label>'
                + '<button on`click="upListItem(\'' + id + '\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-up"></span></button>'
                + '<button onclick="downListItem(\'' + id + '\')" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-down"></span></button>'
                + '<button onclick="deleteListItem(\'' + id + '\', \'' + imgCntr + '\')" class="btn btn-sm btn-warning pull-right"><span class="fa fa-trash"></span></button>'
                + '<button onclick="addImageDescription(\'' + imgCntr + '\');" class="btn btn-sm btn-info pull-right"><span class="fa fa-edit"></span></button>'
                + '</div>';

$('#pa-section-list-data').find('#' + section).find('.list-group').append(secListData);
        $('#' + id).slideDown();

into this one :

// create element from jQuery
secListData = $('<div style="display: none;" class="list-group-item list-item-height clearfix">'
                + '<img  height="50" src="' + path + '" data-fpath="' + fpath + '">'
                + '<label id="imgdesc">' + desc + '</label>'
                + '<button on`click="upListItem(this)" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-up"></span></button>'
                + '<button onclick="downListItem(this)" class="btn btn-sm btn-info pull-right"><span class="fa fa-arrow-down"></span></button>'
                + '<button onclick="deleteListItem(this)" class="btn btn-sm btn-warning pull-right"><span class="fa fa-trash"></span></button>'
                + '<button onclick="addImageDescription(this);" class="btn btn-sm btn-info pull-right"><span class="fa fa-edit"></span></button>'
                + '</div>');

$('#pa-section-list-data').find('#' + section).find('.list-group').append(secListData);
// you can still access the object like this without id
secListData.slideDown();

and for your delete function change to this :

function deleteListItem(elm) {
    // get parent element
    var parentElm = $(elm).closest('.list-group-item');
    bootbox.confirm("Do you really want to delete?", function (result) {
        if (result) {
            parentElm.slideUp("slow", function () {
                parentElm.remove();
                // do other things here
            });
        }
    });
}

hope this helps