Как добавить или удалить указанные c HTML в выбранном теге li с помощью jquery?

Question

Я ищу решение для моей проблемы - Как добавить или удалить указанную c HTML существующую в выбранном теге li

Мой HTML код:

<ul id="property-select-list">
<li class="js-property-select" data-id="1" data-has_media_alt="YES">
    prperty1
</li>
<li class="js-property-select selected" data-id="2" data-has_media_alt="NO">
    prperty2
    <div class="tag-indicator"></div>
</li>
<li class="js-property-select" data-id="3" data-has_media_alt="NO">
    prperty3
    <div class="tag-indicator"></div>
</li>
</ul>

Как добавить или удалить указанный c HTML, существующий в выбранном теге li. В моем случае указанный c HTML равен <div class="tag-indicator"></div>

Пожалуйста, помогите мне найти решение.

Answer 1

Добавить спецификацию c HTML

// Add the html only if it does not exists already
if (!$('.js-property-select.selected > .tag-indicator').length) {
    $('.js-property-select.selected').append('<div class="tag-indicator"></div>');
}

Удалить спецификацию c HTML

$('.js-property-select.selected > .tag-indicator').remove();

Answer 2

// Find correct element
const el = document.querySelector(".js-property-select.selected");

// Create new tag-indicator
const newElement = document.createElement('div');
newElement.className = "tag-indicator";

// Append to active element
el.appendChild(newElement);

// Optional; remove it
const toRemove = el.querySelector(".tag-indicator");
el.removeChild(toRemove);

.tag-indicator {
height: 10px;
border: 1px dotted orange;
}

<ul id="property-select-list">
<li class="js-property-select" data-id="1" data-has_media_alt="YES">
    prperty1
</li>
<li class="js-property-select selected" data-id="2" data-has_media_alt="NO">
    prperty2
    <div class="tag-indicator"></div>
</li>
<li class="js-property-select" data-id="3" data-has_media_alt="NO">
    prperty3
    <div class="tag-indicator"></div>
</li>
</ul>

_{Примечание. Я добавил css к .tag-indicator, чтобы сделать их видимыми.}

---

JQuery

// Add
$('.js-property-select.selected').append('<div class="tag-indicator"></div>');  

// Optional; Remove
$('.js-property-select.selected > .tag-indicator').remove();

.tag-indicator {
height: 10px;
border: 1px dotted orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="property-select-list">
<li class="js-property-select" data-id="1" data-has_media_alt="YES">
    prperty1
</li>
<li class="js-property-select selected" data-id="2" data-has_media_alt="NO">
    prperty2
    <div class="tag-indicator"></div>
</li>
<li class="js-property-select" data-id="3" data-has_media_alt="NO">
    prperty3
    <div class="tag-indicator"></div>
</li>
</ul>