56762


下記で「data-
hoge="b"である要素(子要素含む)」を削除したいのですが、該当要素を(jQueryではなく)JavaScriptで選択するにはどうすれば良いですか？

[code]

    <main>
      <div class="">
        <div class=""></div>
        <div class="">
          <div class="">
            <div class="" data-hoge="a"></div>
            <div class="" data-hoge="b"></div>
          </div>
        </div>
      </div>
    </main>
    
[/code]


CC BY-SA 4.0
2019-07-20T00:23:01.047
56761
2019-07-20T01:26:05.873
2019-07-20T01:21:10.640
32986
7886
question
javascript html html5
「HTML5独自データ属性が指定の値である要素」を削除したい


`querySelectorAll`
メソッドに与えるセレクタとして、属性の値を持つ[属性セレクタ](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors#Syntax)を用いることで可能だと思います。

属性セレクタを使用することで、属性を持っているかどうか(`[data-hoge]`)、属性値が指定のものそのものかどうか(`[data-
hoge="value"]`)、複数指定された属性値の中に一致する値はあるか(`[data-
hoge~="value"]`)など、細かい条件によって要素を選択することが出来ます。

[code]

    document.querySelectorAll("[data-hoge~='b']").forEach(e => e.outerHTML = "");
[/code]

[code]

    <main>
      <div class="">
        <div class=""></div>
        <div class="">
          <div class="">
            <div class="" data-hoge="a">
              <p>テキスト a</p>
            </div>
            <div class="" data-hoge="b">
              <p>テキスト b</p>
            </div>
          </div>
        </div>
      </div>
    </main>
[/code]

[code]

    document.querySelectorAll("[data-hoge~='b']").forEach(e => e.parentNode.removeChild(e));
[/code]

[code]

    <main>
      <div class="">
        <div class=""></div>
        <div class="">
          <div class="">
            <div class="" data-hoge="a">
              <p>テキスト a</p>
            </div>
            <div class="" data-hoge="b">
              <p>テキスト b</p>
            </div>
          </div>
        </div>
      </div>
    </main>
[/code]


CC BY-SA 4.0
2019-07-20T01:19:55.203
56762
2019-07-20T01:26:05.873
2019-07-20T01:26:05.873
32986
32986
56761
answer