我正在尋找問題的解決方案 - 如何添加或刪除所選 li 標記中存在的特定 HTML我的 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>如何添加或刪除所選 li 標記中存在的特定 HTML。就我而言，具體的 HTML 是<div class="tag-indicator"></div>請幫助我找到解決方案。
2 回答
揚帆大魚
TA貢獻1799條經驗 獲得超9個贊
// 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>
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>
Helenr
TA貢獻1780條經驗 獲得超4個贊
添加特定的 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>');
}
刪除特定的 HTML
$('.js-property-select.selected > .tag-indicator').remove();
- 2 回答
- 0 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消