title属性から要素の表示・非表示を切り替える方法について

Question

宜しくお願いします。

下記のような要素があり、ボタンをクリックした際に非表示にしたいと思っております。
その際、消したい要素にidやclass属性が手動で設定できずtitle属性をもとに要素を消したいと考えております。

消したい要素

<div title="publish">
　　<img alt="" src="/icons/red-dot.png">
</div>

要素を消すためのボタン

<button>クリックして消す</button>

下記のコードで試したのですが、うまく消えず、このような場合はどのようにコードを記載すればよろしいでしょうか。
（尚、divで設定してしまうと関係ない要素にも影響が出てしまうのでtitle="publishで識別したいと考えております。）

試したコード

$(function () {
    $('button').click(function () {
        $('[title="publish"]').remove();
    });
});

もしくは、title="publish"の要素があった場合に、その要素にidかclass要素を追加する方法などはありますでしょうか。

宜しくお願い致します。

Comments

[date]

手動で設定できないというのは何らかなプログラムでdivの部分を追加しているのですか?

[tomato01]

はい、google maps apiのマーカーが自動生成されており、そのマーカーに設定されているのがdivの部分となります。

Answer 1

普通に反応しませんか？

<script>
$(function () {
    $('button').click(function () {
        $('[title="publish"]').remove();
    });
});
</script>

<div title="publish">
　　<img alt="" src="/icons/red-dot.png">
</div>
<button>クリックして消す</button>

※元ソース、imgタグのsrc属性のクォーテーションがおかしい

Comments

[tomato01]

ご回答を頂きありがとうございます。
imgタグのsrc属性のクォーテーションは記載ミスです。失礼しました。
確かに、頂いたコードで消すことができました。

すみません、実際の環境に関してもう少し追記をさせて頂きます。

消したい要素ですが、googleマップのマーカーとなり、下記のようなコードが自動生成されております。

<div title="publish" style="width: 32px; height: 32px; overflow: hidden; position: absolute; opacity: 0; cursor: pointer; touch-action: none; left: 48px; top: -43px; z-index: -11;"><img alt="" src="http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png" draggable="false" style="position: absolute; left: 0px; top: 0px; user-select: none; width: 32px; height: 32px; border: 0px; padding: 0px; margin: 0px; max-width: none;"></div>

その際に、div やなどを指定した場合は、消すことができるのですが（その代わり全てのdivも消える）、title="publish" でやると正常に動作をしません。

[tomato01]

原因がわかりましたのでお伝えをさせていただきます。

googleマップのピンについては、仮に上記のdiv要素を手動で削除してもピンが消えない仕様のようでした。（自分の環境では）

実際は指定の要素は無くなっていたのですが、まだピンが残っていたのでコードが効いていないと勘違いをしておりました。

ご回答を頂きありがとうございました。

Answer 2

試してみましたが、普通に消えました。

消したい要素を取り違えている、という可能性が考えられます。
消したい要素が本当に title="publish" の要素なのか確認してみてください。

Comments

[tomato01]

ご回答を頂きありがとうございます。

今回自分が消したかったのがgoogleマップのピンであり、googleマップについては、仮に上記のdiv要素を手動で削除してもピンが消えない仕様のようでした。（自分の環境では）

実際は指定の要素は無くなっていたのですが、まだピンが残っていたのでコードが効いていないと勘違いをしておりました。

ご回答を頂きありがとうございました。