hiddenの値を取得して一致した要素を削除したい

Question

前提・実現したいこと

inputのhiddenで保持しているvalueの値が一致した、input要素を削除したいのですが、
hiddenの値もundefinedで取得できずに困っています。
知恵をお貸しいただきたいです。よろしくお願いいたします。

該当のソースコード

<input type="hidden" name="code[]" class="code" value="A">
<input type="hidden" name="code[]" class="code" value="B">
<input type="hidden" name="name[]" class="name" value="太郎">
<input type="hidden" name="name[]" class="name" value="花子">

let code = "A"; ←消したい対象の値
let name = "太郎"; ←消したい対象の値

const element = document.getElementsByClassName('code').value; 
element.remove();

試したこと

getElementsByClassNameを使用

Answer 1

document.getElementsByClassName('code') は該当する複数の要素を返すので、それぞれの value をチェックする必要があります。

for (let element of [...document.getElementsByClassName('code')]) {
  if (element.value == code)
    element.remove();
}

querySelectorAll()でvalueの値も条件に加えてもいいですね。

for (let element of document.querySelectorAll(`input[name="code"][value="${code}"]`))
  element.remove();

Comments

[meron88]

こちらのコードでうまくできました!
ありがとうございます。

Answer 2

getElementsByClassNameが返すのはHTMLCollecitionなので
valueプロパティを持っていません

こんな感じでしょうか？
(hiddenは確認しにくいのでtextに変えてあります)

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var code = "A";
  var name = "太郎";
  Object.entries({code,name}).forEach(x=>{
    [...document.querySelectorAll(`.${x[0]}[value="${x[1]}"]`)].forEach(y=>{
      y.remove();
    });
  });
});
</script>

<input type="text" name="code[]" class="code" value="A">
<input type="text" name="code[]" class="code" value="B">
<input type="text" name="name[]" class="name" value="太郎">
<input type="text" name="name[]" class="name" value="花子">

Comments

[meron88]

valueプロパティを持っていないのは理解できていませんでした。
ありがとうございます！