Клонированные элементы не отображаются в браузере

Question

У меня есть div на моей странице с некоторыми дочерними элементами, теперь одним нажатием кнопки мне хотелось бы, чтобы этот клоун был клонирован вместе с его дочерними элементами, это работает, однако некоторые элементы не отображаются в оригинале после клонирования я некоторое время пытался понять, почему это происходит. Я проверил свой css и удалил, где у меня было «poisition: absolute» для тех элементов, которые не показывались после клонирования, и все работало. Есть ли способ обойти это? Мне бы очень хотелось узнать.

Это мой Javascript:

 $(document).ready(function() { 
 
     $('#lnkAddNewAnswer').click(function() { 
 
     $('.answer-txt-area').first().clone(true, true).appendTo('.answers-container'); 
 
     }); 
 

 
     $('.answer-txt-area').hover(
 
     function() { 
 
      $(this).find('.options').show(); 
 
     }, 
 
     function() { 
 
      $(this).find('.options').hide(); 
 
     } 
 
     ); 
 

 

 
    });

.answers-container { 
 
    position: relative; 
 
} 
 
.answer-txt-area { 
 
    background-color: #FFFFFF; 
 
    height: auto; 
 
    border: 1px solid #DCDCDC !important; 
 
    border-left: 5px solid #DCDCDC !important; 
 
    resize: none; 
 
    margin-top: 15px; 
 
} 
 
.answer-txt-area .options { 
 
    display: none; 
 
    background-color: rgba(149, 183, 93, 0.2); 
 
    padding: 5px; 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 5px; 
 
    z-index: 9999; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
    border-radius: 5px 5px 5px 5px; 
 
} 
 
.answer-txt-area .options ul { 
 
    margin: 0 !important; 
 
    padding: 0 !important; 
 
} 
 
.answer-txt-area .options ul li { 
 
    list-style: none; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="answers-container"> 
 
    <div class="answer-txt-area"> 
 
    <div class="options"> 
 
     <ul> 
 
     <li><a class="lnkButton"><i class="glyphicon glyphicon-ok"></i> <span class="text">Set as correct answer</span></a> 
 
     </li> 
 
     <li><a class="lnkButton"><i class="glyphicon glyphicon-remove remove"></i> <span class="text">Remove answer</span></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <textarea class="form-control" placeholder="Type answer here.." required="required" name="answer[]" cols="50" rows="10"></textarea> 
 
    <div class="selected-answer"><i class="glyphicon glyphicon-ok"></i> 
 
    </div> 
 
    </div> 
 
</div>

Это то, что он выглядит в браузере перед клоном:

Это то, что она выглядит, как после клон:

Answer 1

Элемент клонируется, он просто не расположен так, как вы думаете.

Дайте .answer-txt-area позицию, и она будет работать, как ожидалось:

.answer-txt-area { 
    position: relative; 
} 

DEMO

.answer-txt-area .options позиционируется относительно ближайшего расположенного предка. Поскольку ближайший позиционированный предок равен .answers-container, ваш .options в исходном элементе и каждый его клон расположены друг на друге