Question

我有这样的标记

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

在该标记中，您可以看到我将文件名作为隐藏字段，在表格下方我有一个删除文件标记。所以事情是这样的，当我点击删除文件然后它将删除文件名内的整个行（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>

但它并没有删除该行。那么有人可以告诉我这里的问题是什么吗？任何帮助和建议都将非常有用。感谢

Answer 1

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

Answer 2

以下代码返回Jquery对象的数组。然后函数.val（）不能有意义。

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

Answer 3

此代码中有两个问题：

首先：Ids不是唯一的。

第二

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();
  });
});

Here jsfiddle

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

3 个答案: