Имеется два блока. Один изначально пустой, второй наполнен элементами. При клике на каждый элемент из второго блока текст элемента должен копироваться в span в первый блок, при повторном клике должен удаляться. Это я реализовал, но, если задавать стили, то при удалении элемента из первого блока вместо пустоты возникает надпись undefined. Голова уже кипит, не могу исправить. Всё это реализовано на jquery.
$(".tags__tabs--block").find(".tags__item").click(function() {
$(this).toggleClass("tags__item--active");
var text = " <span>" + $(this).text() + "</span>";
$(".search__tags--country").html($(".search__tags--country").html().replace(text));
if ($(this).hasClass("tags__item--active")) {
$(".search__tags--country").append(text);
}
});
.tags {
border-top: 2px solid #2B87DB;
position: relative;
z-index: 1;
transition: all 0.5s ease;
}
.tags__country {
display: none;
}
.tags__country--tabs {
padding: 47px 0px 50px 0px;
text-align: center;
}
.tags__country--tabs input {
display: none;
}
.tags__country--tabs input:checked+label {
color: #2B87DB;
}
.tags__tabs--items {
display: flex;
justify-content: center;
margin: 0px 0px 47px 0px;
}
.tags__tabs--item {
margin: 0px 22px 47px;
font-family: Nunito;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 33px;
color: #000000;
text-align: center;
cursor: pointer;
}
.tags__tabs--item:hover {
color: #2B87DB;
}
.tags__tabs--block {
margin-top: 47px;
transition: all 0.3s ease;
flex-direction: row;
justify-content: flex-start;
}
.tags__tabs--block:target {
display: flex;
}
.tags__items {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
margin-right: 15%;
}
.tags__item {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 3px 8.5px;
margin: 15px auto 0px 0px;
cursor: pointer;
}
.tags__item:hover .tags__item--text {
color: #2B87DB;
}
.tags__item--active {
border: 2px solid #000;
box-sizing: border-box;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 3px 30px 3px 8.5px;
margin: 5px auto 5px 0px;
cursor: pointer;
position: relative;
}
.tags__item--active:hover {
border-color: #2B87DB;
}
.tags__item--active .tags__item--text::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background-image: url(../img/icon_cross_1.svg);
right: 7px;
top: 50%;
margin-top: -6px;
}
.tags__item--img {
margin-right: 15px;
max-height: 15px;
}
.tags__item--text {
font-family: Nunito;
font-weight: 400;
font-size: 24px;
line-height: 33px;
color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search__item">
<div class="search__title">Выберите страну:</div>
<div class="search__tags search__tags--country"></div>
</div>
<div class="tags__tabs--block" id="top">
<div class="tags__items">
<div class="tags__item">
<div class="tags__item--text">Австрия</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Дания</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Дания</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Дания</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Дания</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Нидерланды</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Франция</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Албания</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Ирландия</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Норвегия</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Хорватия</div>
</div>
<div class="tags__item">
<div class="tags__item--text">Андорра</div>
</div>
В качестве примеров https://jsfiddle.net/s6katrgc/2/ https://mau0hezzz.h1n.ru/demo/tourism/