jQueryでクリックイベントを設定したい

Question

jQueryを使用してクリックイベントを設定したいのですが上手くいきません。

画像を選択できる様にしているinput部分の装飾をCSSで行い、ファイル名の表示をjQueryで設定しています。
ファイルを選択してファイル名を表示させることはできるのですが、×ボタンをクリックした際にファイル名の表示を消すことができません。

<div id="btn">画像を選択</div>
<table class="imgtable">
 <tbody>
  <tr id="userfile_item">
   <td class="image_button">
    <input type="file" name="filename" id="files">
    <span data-mwform-file-derete="filename" class="mwform-file-delete" style="visibilyty: visible;">×</span>
   </td>
   <td class="image_box">
    <input id="filename" type="text" name="test1" placeholder="選択されていません" readonly>
   </td>
  </tr>
 </tbody>
</table>

#btn{
    width: 120px;
    height: 30px;
    background-color: rgb(131, 131, 131);
    border-radius: 50px;
    position: absolute;
    padding: 5px 14px;
    left: 13vw;
    cursor: pointer;
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 10;
}

.mwform-file-delete {
    padding: 0;
    top: 11px;
    left: 78px;
    position: absolute;
}

.image_box{
    display: flex;
    position: absolute;
    right: -35px;
    top: -1px;
    width: 90%;
    margin: 0;
}

#filename{
    display: inline-block;

    width: 90%;
    height: 30px;
    background-color: #EFF7FF;
    border-radius: 6px;
    border-color: #707070;
    border-width: thin;
    padding: 5px;
    pointer-events: none;
}

$(function() {
    $('#files').css({
        'position': 'absolute',
        'top': '-9999px'
    }).change(function() {
        var val = $(this).val();
        var path = val.replace(/\/g, '/');
        var match = path.lastIndexOf('/');
        $('#filename').css("display","inline-block");
        $('#filename').val(match !== -1 ? val.substring(match + 1) : val);
    });

    $('#filename').bind('keyup, keydown, keypress', function() {
        return false;
    });
    $('#filename, #btn').click(function() {
        $('#files').trigger('click');
    });

    let element = $('span');
    element.attr('id', 'imgbutton');
    $('#imgbutton').css({
    }).change(function() {
        $("#filename").val("選択されていません");
    })
    
});

ファイルを選択し、選択したファイル名をfilenameに表示し、同時に×ボタンを表示するところまでは上記コードでできていますが、問題の×ボタンをクリックした際にfilenameに表示されているファイル名を消すことができません。

エラーは出ていない様なのですが、

    $('#imgbutton').css({
    }).change(function() {
        $("#filename").val("選択されていません");
    })

の部分が反応しません。
この部分ではfilenameのvalを変更しようとしていますが、filesのファイル名部分がファイル選択時だけでなく×ボタン選択時もfilenameに反応されれば問題ありません。

この部分を.clickで指定しても変化はありませんでした。
どうしたら想定どおりの動作をするのでしょうか？

お手数をおかけいたしますが、どなたかご教授頂けますと助かります。

Comments

[m.ts10806]

「動かない」「うまくいかない」では何も伝わりませんので、「実際に起きたこと」を記載してください。
https://teratail.com/help/question-tips#questionTips3-4

[m.ts10806]

> $('#imgbutton').css({
}).change(function() {

上記、どういうつもりで.css()をつけたのでしょう。
「change」は「何がchangeした」という想定でしょうか。

[退会済みユーザー]

内容が分かり辛く申し訳ありません。
「実際に起きたこと」は「何も起きていません」。
「上手くいかない」と記載しているとこを以外は想定どおりの動作をしており、「何も起きていない」部分が質問の「×ボタンをクリックした際にファイル名の表示を消す」部分です。
また、「.css()をつけた理由」は「何も起きない」部分以外はファイル選択ボタンをデザインする方法を検索して出てきたHPを参考にしています。
（https://www.marukin-ad.co.jp/marulog/?p=1362）
「change」については、最初.clickで×ボタンをクリックした際に変化させようとしていたのですが反応しなかったため、反応をしている参考HPと同じ書き方を試しています。

[m.ts10806]

既にidがついてるspanにattrしようとしているのはどういう意図ですか？
参考先そのままとはいえ、意図が説明できないコードをそのまま借用するだけでは作りたいものは作れないですよ。

[退会済みユーザー]

失礼いたしました。
HTMLは元はWordPressで使用しているMW WP Formで作成しているため、デベロッパーツールで表示したものを記載しています。
なので元はidはついていません。
コード修正いたしました。
また、参考先のコードの意味については全て調べてわかる範囲での理解はしていますが、その上で使用した.clickが反応せず、反応している方の参考先と同じやり方を試してみようと行った結果が質問文になります。

Answer 1

こんにちは、changeではなくclickで出来ると思います。

$("#imgbutton").on("click", function () {
    //×ボタンをクリックした際にしたいこと
});

Comments

[退会済みユーザー]

ご回答をいただきありがとうございます。
教えていただいた内容で試して見たのですが、反応しませんでした。
質問文ではfilenameのvalを書き換えようとしていますが、filesの内容がファイル選択時だけでなく、×選択時も反映されれば問題ないのですがどうすれば反応してくれる様になるのでしょうか？
もしお分かりになる様であればご教授頂けますと大変有り難いです。

[fake_shibe]

こんにちは、よく分かりませんが、以下のコードでは駄目なのですか？

let element = $("span");
element
.attr("id", "imgbutton")
.css({})
.on("click", function () {
$("#filename").val("");
})

[退会済みユーザー]

再度ご回答いただきありがとうございます。
こちらの方法で消すことはできたのですが、消したら元の機能（ファイルを選択し、選択したファイル名を表示する）が反応しなくなりました。
質問自体は消すことだけだったのでこちらで解決にさせていただければと思います。
お忙しい中ご教授いただきありがとうございました。