カスタム属性に基づいて、innerHTMLから特定の要素を削除するにはどうすればよいですか？

Question

のカスタム属性data-promoの値が1のリンクを削除するにはどうしますか？ボタンの出力結果onclickは次のようになります。

10:00

11:00

12:00

任意の助けをいただければ幸いです。

これまでに試したことのフィドルを見つけることができますhere。あなたは何ができるか

function day(item) { 
 
    var data = item.getAttribute('data-value'); 
 
    document.getElementById('time-wrap').innerHTML = document.getElementById(data).innerHTML; 
 
}

<div style="display:none;" id="2017_12_9"> 
 
    <a class="even" onclick="times(this)" data-promo="0">10:00am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="1">10:30am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="0">11:00am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="1">11:30am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="0">12:00pm</a><br> 
 
</div> 
 
<button class="datecurrentselected" onclick="day(this)" data-value="2017_12_9">Dec 09, 2017</button> 
 
<div id="time-wrap"></div>

Answer 1

.querySelectorAll()との組み合わせでカスタム属性を参照1（すなわち[data-promo="1"]）、すなわち、CSSセレクタを使用し、それらを削除するには.forEach()を使用して返されたリストを反復処理でありますセレクタに一致する要素。たとえば：

function day(item) { 
 
    var data = item.getAttribute('data-value'); 
 
    document.getElementById('time-wrap').innerHTML = document.getElementById(data).innerHTML; 
 
    document.querySelectorAll('[data-promo="1"]').forEach(function(element) { 
 
    element.parentNode.removeChild(element); 
 
    }); 
 
}

<div style="display:none;" id="2017_12_9"> 
 
    <a class="even" onclick="times(this)" data-promo="0">10:00am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="1">10:30am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="0">11:00am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="1">11:30am</a><br> 
 
    <a class="even" onclick="times(this)" data-promo="0">12:00pm</a><br> 
 
</div> 
 
<button class="datecurrentselected" onclick="day(this)" data-value="2017_12_9">Dec 09, 2017</button> 
 
<div id="time-wrap"></div>

が効果的に空行を作成し、<a>タグの外側にある<br>タグである、少し私を悩ますことがあります。あなたはいくつかの創造的なCSSのトリックやJavascriptを使用してそれらを削除することができますが、あなたのHTML構造を調整すること（リンクタグの中に入れておくこと）をお勧めします。しかしあなたの電話。