ファイル添付するとファイル名の右側にxボタンを表示したい

ファイル添付されてないと「添付されていません」を
添付されてればファイル名の右側にXボタンを表示したいです。

Xボタンは以下のように実装しました。

button.delete#del-button(style="display: none")

その後、ファイル添付(file-input)があったときにそのeventを拾ってdisplayのスタイルをinline-blockに変更すればうまくいくと思いましたが、うまく動いてくれません。

作成したコードは以下のとおりです。

slim
1  .field-body.flex
2    .field
3      .field-body
4        .field
5          .control
6            .file.has-name
7              label.file-label
8                //= file_field :fileupload, :file, class: "file-input"
9                input.file-input(type="file" name="upload_file")
10                span.file-cta
11                  span.file-icon
12                    i.fas.fa-upload
13                  span.file-label
14                    | ファイルを選択する
15                span.file-name
16                  |　添付されていません
17                  //button.delete#del_button
18                  button.delete#del-button(style="display: none")

js
1javascript:
2  const delButton = document.getElementById("del-button")
3  console.log("delButton:",delButton);
4
5  document.querySelector('.file-input').addEventListener('change',function(e){
6    var files = document.querySelector('.file-input').files;
7    if (files.length > 0) {
8      document.querySelector('.file-name').innerText = files[0].name;
9      delButton.style.display = "inline-block";
10      //const delButton = document.getElementById("delbutton")
11      //const delButton = document.querySelector('.delete');
12      console.log("xx", document.getElementById("del-button"))
13      console.log("delButton22:",delButton.style.display);
14
15    }
16  });