Javascript jQuery删除匹配文件名为隐藏的行

我有一个这样的标记

<table id="data">
    <tr>
      <td>Name</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="file-name" value="file.doc">
      </td>
      <td><input type="text" value="Test 1"></td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="file-name" value="file1.docx">
      </td>
      <td><input type="text" value="Test 2"></td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="file-name" value="file.pdf">
      </td>
      <td><input type="text" value="Test 3"></td>
    </tr>    
  </table>
  <a href="#" id="remove">Remove File</a>

<script type="text/javascript">
    $(document).ready(function() {
      $('#remove').click(function(e) {
        var FileName = 'file.doc';
        var GetRowVal = $('table#data td #file-name').val();
        if(GetRowVal == FileName ) {
          var Parent = $(GetRowVal).parent().remove();
        }
        else {
          console.log(' error');
        }
      });
    });
  </script>

名称
测验

在该标记中，您可以看到我将文件名作为隐藏字段，并且在表下有一个remove file标记。所以事情是这样的，当我点击删除文件时，它会删除文件名所在的整行（tr标记） file.doc已存在。因此，我将我的js制作成这样

<table id="data">
    <tr>
      <td>Name</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="file-name" value="file.doc">
      </td>
      <td><input type="text" value="Test 1"></td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="file-name" value="file1.docx">
      </td>
      <td><input type="text" value="Test 2"></td>
    </tr>
    <tr>
      <td>
        <input type="hidden" id="file-name" value="file.pdf">
      </td>
      <td><input type="text" value="Test 3"></td>
    </tr>    
  </table>
  <a href="#" id="remove">Remove File</a>

<script type="text/javascript">
    $(document).ready(function() {
      $('#remove').click(function(e) {
        var FileName = 'file.doc';
        var GetRowVal = $('table#data td #file-name').val();
        if(GetRowVal == FileName ) {
          var Parent = $(GetRowVal).parent().remove();
        }
        else {
          console.log(' error');
        }
      });
    });
  </script>

$（文档）.ready（函数（）{
$（“#删除”）。单击（函数（e）{
var FileName='file.doc'；
var GetRowVal=$（'table#data td#file name'）.val（）；
如果（GetRowVal==文件名）{
var Parent=$（GetRowVal.Parent（）.remove（）；
}
否则{
log（'error'）；
}
});
});

---

但它并没有消除这一排。有人能告诉我这里有什么问题吗？任何帮助和建议都是可以接受的。谢谢

您的Html中有重复的id，请更正该问题并尝试以下答案：

<script type="text/javascript">
    $(document).ready(function() {
      $('#remove').click(function(e) {
        e.preventDefault();
        var FileName = 'file.doc';
        $('input[type="hidden"]').each(function(){
          if( $(this).val() == FileName )
          {
             $(this).closest('tr').remove();
          }
        });
      });
    });
</script>

$（文档）.ready（函数（）{
$（“#删除”）。单击（函数（e）{
e、 预防默认值（）；
var FileName='file.doc'；
$（'input[type=“hidden”]”）。每个（函数（）{
if（$（this）.val（）==文件名）
{
$（this）.closest（'tr'）.remove（）；
}
});
});
});

下面是Jquery对象的代码返回数组。 那么function.val（）就没有意义了

$('table#data td #file-name');

---

此代码中有两个问题：

第一：ID不是唯一的

第二：

var GetRowVal = $('table#data td #file-name').val();

将仅保存值，例如

file.doc

所以你不能晚一点 删除此行中的对象：

var Parent = $(GetRowVal).parent().remove();

因此，要修复它，请首先将id更改为类，如下所示：

<input type="hidden" class="file-name" value="file.doc">

---

< /P> IDS应该是唯一的。属性>代码> ID >代码>在整个DOM中必须是唯一的，所以考虑改变<代码>文件名< /COD>和<代码> ID=“文件名”<代码>，例如“代码>文件名< /代码>和<代码>类=“文件名”< /代码>。$（GETROWVAL）PARTENE（）指向DOM元素的正确部分吗？它将永远不会删除，因为的父项是，而不是。该链接是否对其删除的行“filename”具有动态值？