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

jQuery remove row with matching file name as hidden

本文关键字：文件名 删除 隐藏 jQuery      更新时间：2023-09-26

我有一个类似的标记

<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>

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

<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>

但它并没有消除这一排。有人能告诉我这里有什么问题吗？任何帮助和建议都将非常有用。感谢

您的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>

下面的代码返回Jquery对象的数组。那么函数.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">

稍后您可以修改您的代码：

    $(document).ready(function() {
  $('#remove').click(function(e) {
    var GetRowVal = $(".file-name[value='file.doc']");
      $(GetRowVal).parent().parent().remove();
  });
});

这里jsfiddle

相关文章：