未捕获的类型错误：无法读取 null 的属性“textContent”

Question

我看过类似的问题，但他们说这是因为 js 在 html 之前被调用，但我认为在我的代码中，一旦加载了所有 html，就会调用元素。

<table id="UserCards">
  <tr>
    <th width=20%><strong>Card Holder</strong></th>
    <th width=20%><strong>Card Number</strong></th>
    <th width=10%><strong>Expiry Date</strong></th>
    <th width=10%><strong>CVC</strong></th>
    <th width="5%"></th>
  </tr>
  {% for row in rows %}
      <tr>
        <td id="name">{{ row['CardName']}}</td>
        <td id="number">****************</td>
        <td class="realnumber" style="display:none;">{{ row['CardNo'] }}</td>
        <td id="date">{{ row['CardExpDate'] }}</td>
        <td id="code">***</td>
        <td id="realcode" style="display:none;">{{ row['CardSecretCode'] }}</td>
        <td><a href="#" class="delete-row" onclick="deleteThis(this)"><span class="fas fa-trash-alt"></span></a></td>
      </tr>
  {% endfor %}
</table>

function deleteThis(obj){
      var cardnumber = $(obj).siblings('.realnumber')[0].textContent;
      $(obj).closest('tr').remove();
      $.ajax({
        type: 'POST',
        url: "{{ url_for('deleterow') }}",
        contentType: "application/json",
        data: JSON.stringify({ number: cardnumber }),
        dataType: "json",
        success: function(response){
          window.location.href = 'http://127.0.0.1:5000/Drunkfy/Home/Paymentdetails';;
        },
        error: function(error){
            console.log(error);
        }
      });
    }

Answer 1

deleteThis 方法的第一行是删除整个包装 tr 元素，这也会删除其中的元素。所以 - 如果列表中只有 1 项 - 当它到达第二行代码时 IS NO td 和 id 的 realnumber 不再存在。

尝试将第二行向上移动，以便在删除 tr 之前检索它。

  var cardnumber = document.getElementById('realnumber').textContent;
  $(obj).closest('tr').remove();

此外，您在列表中重复的元素上使用id，这意味着页面上可能有多个<td> 元素与realnumber 中的相同id。您应该解决此问题，否则document.getElementById 将始终返回页面上的第一个realnumber td，无论您要删除哪个。

考虑将其切换到一个类，然后使用 jquery 来查找它：

  var cardnumber = $(obj).parent().siblings('.realnumber')[0].textContent;
  $(obj).closest('tr').remove();