jQuery セレクタ指定方法

jQueryで非表示にしたいHTMLのボタンがあります。
しかし同じ名前で記述されている部分が多くうまく設定できません。

<条件>
HTMLファイルの書き換えは出来ません。
jQueryでHTML,CSSを追加していく。

ご教授お願い致します。

HTML文
<div title="" role="toolbar" data-alloy-tabstop="true" tabindex="-1" class="tox-toolbar__group">
  <button aria-label="HTMLの挿入" title="HTMLの挿入" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false">
    <span class="tox-icon tox-tbtn__icon-wrap">
      <svg width="24" height="24" role="addhtml">
        <use xlink:href="/rs-statics/images/sprite.svg#ic_addhtml"></use>
      </svg>
    </span>
  </button>
  <button aria-label="アセットの挿入" title="アセットの挿入" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false">
    <span class="tox-icon tox-tbtn__icon-wrap">
      <svg width="24" height="24" role="new-document">
        <use xlink:href="/rs-statics/images/sprite.svg#ic_asset"></use>
      </svg>
    </span>
  </button>
  非表示にしたいHTML文
  <button aria-label="画像の挿入" title="画像の挿入" type="button" tabindex="-1" class="tox-tbtn" aria-disabled="false">
    <span class="tox-icon tox-tbtn__icon-wrap">
      <svg width="24" height="24" role="image">
        <use xlink:href="/rs-statics/images/sprite.svg#ic_image"></use>
      </svg>
    </span>
  </button>

下記のようにセレクタを設定しました。
しかし非表示に出来ませんでした。

$("button[aria-label='画像の挿入']").addClass("hidden");
$("button[title='画像の挿入']").addClass("hidden");
$(":button[title='画像の挿入'].tox-tbtn").addClass("hidden");
$("use[href = '/rs-statics/images/sprite.svg#ic_image']").parent("tox-tbtn").addClass("hidden");
$("use[href = '/rs-statics/images/sprite.svg#ic_image']").parent("tox-tbtn").css("display" , "none");
$("button[title='画像の挿入']").css("display", "none");
$("button[aria-label='画像の挿入']").hide();
$("button[title='画像の挿入']").hide();
$(":button[title='画像の挿入'].tox-tbtn").hide();
$("use[href = '/rs-statics/images/sprite.svg#ic_image']").parent("tox-tbtn").hide();

int32_t

2021/07/26 07:08

JavaScriptのコードはどういうタイミングで実行していますか? できれば、問題を再現できる完全な HTML+CSS+JavaScriptのコードを掲載してください。

ArMigELo

2021/07/26 08:23

>int32_t 完全なコードは社外秘もあるので書けませんでした。

行動規範の内容に同意します

回答3件

.addClass("hidden");ではなく.hide()で試してみてはいかがでしょう。

【.hide() | jQuery API Documentation】
https://api.jquery.com/hide/

投稿2021/07/26 05:57

kei344

総合スコア69458

ArMigELo

2021/07/26 06:56

.hide試させて頂きました。非表示に出来ませんでした...

kei344

2021/07/26 07:16

https://jsfiddle.net/kzn6jmL8/ ↑提示のコード（と私の回答）で問題なく非表示にできることが確認できました。 jQueryを書いている場所が当該要素より前の部分でロードを待っていない（「$(function{})」の中で実行していない）とか、ページ表示後に動的に作成される要素とか、そういう状況では？

行動規範の内容に同意します

ベストアンサー

３番目の例示以外は条件にあわないので非表示にはならないでしょう
また、クラスで指定しているのでcssの指定が必要です

CSS
1.hidden{display:none}

投稿2021/07/26 04:54

yambejp

総合スコア115012

ArMigELo

2021/07/26 05:52

セレクタの設定方法はあっているということでしょうか？

yambejp

2021/07/26 05:55

属性やクラス、IDなどをセレクタとして利用する方法は問題ありません。ただカスタムデータではない「aria-label」のようなものが悪影響がないとはいいきれません

ArMigELo

2021/07/26 06:55

「class="tox-tbtn"」に「hidden」が入らないです...

yambejp

2021/07/26 07:04

$(function(){ $('.tox-tbtn').addClass('hidden'); }); とすればtox-tbtnクラスにhiddenクラスは追加されますよね？どの処理でhiddenクラスを付加する想定かわかりませんが別の条件がひっかかっているのでは？

yambejp

2021/07/26 07:12

もしかしてここのことでしょうか？ $("use").filter(function(){return $(this).attr('xlink:href')=='/rs-statics/images/sprite.svg#ic_image';}).closest('.tox-tbtn').addClass('hidden');

ArMigELo

2021/07/26 07:28

できました。ありがとうございました。

行動規範の内容に同意します

htmlが変更可能であればhtmlの各タグにidを付与しましょう。
その後、IDで取得するように変更するのが第一歩です