0
我在HTML中具有转盘控制和我有10元（含文字的div）的滑块，可以说就像父DIV中10个孩子，我要检查的条件和希望将其删除。这是我所做的，我把所有的儿童divs放在一个主父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> </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>
感谢