jQuery セレクタ 指定方法

Question

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();

Comments

[int32_t]

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

[ArMigELo]

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

Answer 1

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

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

Comments

[ArMigELo]

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

[kei344]

https://jsfiddle.net/kzn6jmL8/
↑提示のコード（と私の回答）で問題なく非表示にできることが確認できました。

jQueryを書いている場所が当該要素より前の部分で ロードを待っていない（「$(function{})」の中で実行していない）とか、ページ表示後に動的に作成される要素とか、そういう状況では？

Answer 2

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

.hidden{display:none}

Comments

[ArMigELo]

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

[yambejp]

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

[ArMigELo]

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

[yambejp]

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

[yambejp]

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

[ArMigELo]

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

Answer 3

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

$('#追加したID')

あるいは、これらのボタンが異なる領域に定義されているのであれば親子関係を利用して
以下のように定義することで解決できるかもしれません。

$('.parent button')

Comments

[ArMigELo]

直接変更が出来ないです。
領域も同じ位置にあります。親も同じです。
jQueryでidをこの列に入れることは可能ですか？