title: Uncaught TypeError: Cannot read property 'textContent' of null
body: <p>I have looked at similar questions but they say that this happens because the js is called before the html but I think that in my code the element is called once all the html is loaded I believe.</p>
  
  <pre><code>&lt;table id="UserCards"&gt;
    &lt;tr&gt;
      &lt;th width=20%&gt;&lt;strong&gt;Card Holder&lt;/strong&gt;&lt;/th&gt;
      &lt;th width=20%&gt;&lt;strong&gt;Card Number&lt;/strong&gt;&lt;/th&gt;
      &lt;th width=10%&gt;&lt;strong&gt;Expiry Date&lt;/strong&gt;&lt;/th&gt;
      &lt;th width=10%&gt;&lt;strong&gt;CVC&lt;/strong&gt;&lt;/th&gt;
      &lt;th width="5%"&gt;&lt;/th&gt;
    &lt;/tr&gt;
    {% for row in rows %}
        &lt;tr&gt;
          &lt;td id="name"&gt;{{ row['CardName']}}&lt;/td&gt;
          &lt;td id="number"&gt;****************&lt;/td&gt;
          &lt;td class="realnumber" style="display:none;"&gt;{{ row['CardNo'] }}&lt;/td&gt;
          &lt;td id="date"&gt;{{ row['CardExpDate'] }}&lt;/td&gt;
          &lt;td id="code"&gt;***&lt;/td&gt;
          &lt;td id="realcode" style="display:none;"&gt;{{ row['CardSecretCode'] }}&lt;/td&gt;
          &lt;td&gt;&lt;a href="#" class="delete-row" onclick="deleteThis(this)"&gt;&lt;span class="fas fa-trash-alt"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
    {% endfor %}
  &lt;/table&gt;
  </code></pre>
  
  <pre><code>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);
          }
        });
      }
  </code></pre>