使用JQuery将列表元素从一个无序列表移动到另一个

Question

I have looked at a few of the other answers to this question, but I have still not been able to get it done correctly. I have two unordered lists. One is dynamically created from a database table. The other is just a static table that begins empty. Each list contains, or will contain, list elements with nested anchor and awesome-font icon elements. My goal is to be able to, upon clicking the icon, transfer the list element from one list to the other, while changing the icon from a plus to minus sign. So far, I can successfully transfer items from the dynamic list to the static one, and I can change the icons,but I can not figure out how to transfer them back to the original list.

Here's my html:

<div class="row" id="constructTable">
        <div class="col-md-6">
            <h1>Choose your Columns:</h1>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" id="heading1" role="tab">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1" class="collapsed"><span style="font-size: 16px;">Candidate Data</span></a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height:0px;">
                        <ul class="list-group choose" id="candidate">
                            <li class="list-group-item" id="candidate0">
                                <a class="btn btn-sm btn-default">
                                    <i class="fa fa-lg fa-plus"></i>
                                </a>
                                <span style="font-size: 14px; margin-left:5px;">First Name</span>
                            </li>
                            <li class="list-group-item" id="candidate1">
                                <a class="btn btn-sm btn-default">
                                    <i class="fa fa-lg fa-plus"></i>
                                </a>
                                <span style="font-size: 14px; margin-left:5px;">Last Name</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <?php $counter = 2; ?>
            <?php foreach ($mergedTests as $test): ?>
                <?php $count=0 ?>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="margin-top:-10px;">
                    <div class="panel panel-default">
                        <div class="panel-heading" id="heading<?php echo $counter; ?>" role="tab">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $counter; ?>" aria-expanded="false" aria-controls="collapse<?php echo $counter; ?>" class="collapsed">
                                <span style="font-size: 16px;"><?php if( ! $test->example ): ?><?php echo $test->example;  ?> Data<?php else: ?><?php echo $test->example; ?> Data<?php endif; ?></span>
                                </a>
                            </h4>
                        </div>
                    </div>
                    <?php $label = explode(",", $test->subtestLabel); ?>
                    <div id="collapse<?php echo $counter; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $counter; ?>" aria-expanded="false" style="height:0px;">
                        <ul class="list-group" id="<?php echo $test->subTestAbbreviation; ?>">
                            <?php if ( ! $test->testMakerTestId) : ?>
                                <?php foreach($label as $category): ?>
                                    <li class="list-group-item" id="<?php echo $test->example; ?><?php echo $count; ?>" >
                                        <a class="btn btn-sm btn-default">
                                            <i class="fa fa-lg fa-plus"></i>
                                        </a>
                                        <span  style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> <?php echo $category; ?></span>
                                    </li>
                                    <?php $count++; ?>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>0">
                                    <a class="btn btn-sm btn-default">
                                        <i class="fa fa-lg fa-plus"></i>
                                    </a>
                                    <span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Raw Score</span>
                                </li>
                                <li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>1">
                                    <a class="btn btn-sm btn-default">
                                        <i class="fa fa-lg fa-plus"></i>
                                    </a>
                                    <span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Percentile</span>
                                </li>
                            <?php endif; ?>
                        </ul>
                    </div>
                </div>
                <?php $counter++; ?>
            <?php endforeach; ?>
        </div>
        <div class="col-md-6">
            <h1>Arrange Your Columns:</h1>
            <ul class="list-group ui-sortable" id="selectedColumns">
            </ul>
        </div>
    </div>
</div>

And my JQuery attempt so far:

$('li a').click(function(){
    var parentId = $(this).parent().attr('id');
    $(this).find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
    $("#selectedColumns").append($("#" + parentId));
});

//  Move selection from Arrange Your Columns back to Choose Your Columns
$('ul#selectedColumns').click(function(){
    var parentId = $(this).parent().attr("id");
    console.log(parentId);
    transferId = parentId.slice(0, -1);
    $("#" + parentId).find($(".fa")).removeClass('fa-minus').addClass('fa-plus');
    $("#" + transferId).append($("#" + parentId));
});

Any help would be greatly appreciated. Thank you!

Answer 1

Ok here you may need to use names for these lists, the target is selectedColumns, and the source is unordered lists has some database generated id. I will put a class name source-list to your datbase generated lists.

We can use this class name as a common selector of source lists and since the dom will change via user interaction we should use .on instead of .click binding.

First we send a clone of the selected item to selectedColumns and hide the original one so we wont have to find exact place of the element to roll back;

$(".source-list").on("li a","click", function(e) {
    // get id of element for further reference
    var itemId = $(this).attr("id");

    // clone the item to a variable
    var cloneItem = $(this).parent().clone();
    // change the appearence of cloned item
    cloneItem.find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
    // append cloned item to selectedColumns
    cloneItem.data("id", itemId).removeAttr('id').appendTo("#selectedColumns");
    // hide the original item
    $(this).hide();
});

$("#selectedColumns").on("li a","click", function(e) {
    var itemId = $(this).data("id");
    $(this).remove();
    $(itemId).show();
});

Since this code has alot of errors / typos, i have created a fiddle for this,

https://jsfiddle.net/wxsnagr9/7/

Answer 2

Looks to me like what you have should be fine for the most part, you should just fix the selectors (also, using event delegation will save you from needing to bind data/recheck parent locations):

$('#candidate').click('li a', function(){
    $(this).find(".fa").removeClass('fa-plus').addClass('fa-minus');
    $(this).parent().appendTo($("#selectedColumns"));
});


$('#selectedColumns').click('li a', function(){
    $(this).find(".fa").addClass('fa-plus').removeClass('fa-minus');
    $(this).parent().appendTo($("#candidate"));
});