按顺序从 Carousel 控件中添加和删除元素

我在 html 中有一个轮播控件，我在滑块中有 10 个元素（带有文本的 div），你可以说在父 div 中有 10 个孩子，我想检查条件并相应地删除它们。这就是我所做的，我将所有子 div 放在主父 div 中并创建了另一个父 div，该父 div 是空白且现在完全隐藏，每次我在检查某些条件时删除任何子 div 时，我都会在隐藏的父 div 中添加相同的子在从主父 div 中删除它之前。同样，在将子 div 添加回主父 div 之前，我将子 div 添加到主 div 后从隐藏 div 中删除它。现在，问题是我想以相同的顺序添加删除的 div，例如我删除了 div 3 和 div 5 现在父级有 div 1、div 2、div4 和 div 6，现在我想重新添加 div 5列出来，该列表应该变成 div1、div2、div4 div 5 div 6 等等……但是让它们依次排列似乎很困难。请查看代码并向我建议任何替代方案或您认为我做错的任何事情。

    <div id="myCarousel" class="carousel slide " data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div id="parentDiv" class="carousel-inner">
        <div id="1" class="item active lx-carouselimage1 lx-height-600">
            <div class="lx-carouselheadertext align-center">1A better way to get the mortgage!</div>
            <div class="carouseltext align-center">
            </div>
        </div>
        <div id="2" class="item lx-carouselimage2 lx-height-600">
            <div class="lx-carouselheadertext align-center">2A better  way to get the mortgage!</div>
            <div class="carouseltext align-center">

            </div>
        </div>
        <div id="3" class="item lx-carouselimage3 lx-height-600">
            <div class="lx-carouselheadertext align-center">3A better  way to get the mortgage!</div>
            <div class="carouseltext align-center"></div>
        </div>
    </div>
    <div style="visibility:hidden" id="HiddenparentDiv" class="carousel-inner">

    </div>

    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-right"><img src="~/App/Images/chevron-left.png" class="lx-width-50"></span>
    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"><img src="~/App/Images/chevron-right.png" class="lx-width-50"></span>
    </a>


</div>
<div></div>
<p>&nbsp;</p>
Name of child element to be removed: <input id="nameOfChild" type="text" value="child2"><input type="button" value="Remove Element" onClick="var name=document.getElementById('nameOfChild').value; removeElement('parentDiv', name);">
<br><br>
For those who are lazy in typing in the actual names, we have these handy-dandy buttons:
<input type="button" value="Remove child1" onClick="removeElement('parentDiv', '1', 'HiddenparentDiv');">
<input type="button" value="Remove child2" onClick="removeElement('parentDiv', '2', 'HiddenparentDiv');">
<input type="button" value="Remove child3" onClick="removeElement('parentDiv', '3','HiddenparentDiv');">
<input type="button" value="Remove parentDiv" onClick="removeElement('parentDiv', 'parentDiv',' HiddenparentDiv');">
<input type="button" value="Add child1" onClick="addElement('parentDiv','1','HiddenparentDiv');">
<input type="button" value="Add child2" onClick="addElement('parentDiv','2','HiddenparentDiv');">
<input type="button" value="Add child3" onClick="addElement('parentDiv','3','HiddenparentDiv');">

<script>
    var child1 = document.getElementById('parentDiv').getElementById('1');
    //var myID = document.getElementById('child1');
    //var children = document.getElementById('1').childNodes;
  alert(child1);

    function GetIndex(childId)
    {
        alert("Inside GetIndex ");

        var tempID = childId - 1;
        var parent = document.getElementById('parentDiv');

        while (tempID >= 0)
        {
            var childid = '#' + tempID;
            alert($('#parentDiv').find('#1'));
            // var child = document.getElementById('parentDiv').childNodes;
            //var child = document.getElementById('childDiv');
            //  alert(child);
            //var child = document.hasChildNodes;
            //var child = document.getElementById(tempID).childNodes;
            var child = document.getElementById('parentDiv').innerHTML;
            alert(child);

            if (child != null)
            {
                alert("Inside IF ");

                break;
            }
            else
            {
                alert("Inside elSE ");

                tempID--;
            }
        }
        if (tempID < 0)
        {
            tempID = 0;
        }
        return tempID;

    }

    function test() {
        alert(document.getElementById('hiddenDiv'));
    }

    function removeElement(parentDiv, childDiv, hiddenDiv) {
        if (childDiv == parentDiv) {
            alert("The parent div cannot be removed.");
        }
        else {
            var hidden = document.getElementById(hiddenDiv);
            var child = document.getElementById(childDiv);
            var parent = document.getElementById(parentDiv);
            hidden.appendChild(child);
            parent.removeChild(child);
        }

    }


    function addElement(parentDiv, childDiv, hiddenDiv) {
        var hidden = document.getElementById(hiddenDiv);
        var child = document.getElementById(childDiv);
        var parent = document.getElementById(parentDiv);
       // var index = GetIndex(child.id);
        //alert(index);
        parent.appendChild(child.childNodes[GetIndex(child.id)]);  
        hidden.removeChild(child);
    }

    function myFunction() {
        var newItem = document.createElement("LI");
        var textnode = document.createTextNode("Water");
        newItem.appendChild(textnode);

        var list = document.getElementById("myList");
        list.insertBefore(newItem, list.childNodes[0]);
    }
</script>

谢谢