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

pm方法的第一行是删除整个包装的deleteThis元素，这也将删除其中的元素。因此，如果列表中只有1个项目，那么当它到达第二行代码时，它会出现是 tr，其中td为id不再。

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

realnumber

此外，您在列表中重复的元素上使用var cardnumber = document.getElementById('realnumber').textContent; $(obj).closest('tr').remove();，这意味着页面上可能有多个id元素，而{ {1}}。您应该解决此问题，否则<td>总是返回页面上的第一个id realnumber，无论您要删除哪个。

考虑将其切换为类，然后使用jquery进行查找：

document.getElementById

未捕获的TypeError：无法读取null的属性'textContent'

1 个答案: