JavaScript ID号在两位数后不起作用

Question

我在处理ID号时遇到这个问题。当它达到10以上时，我试图删除一些添加的行，但它不会删除正确的行。就像我将要显示第11行一样。它将删除第1行而不是第11行，它只能找到＃field1而不是＃field11。谁能帮助我解决这个问题？

$('.remove-me').click(function(e){
        e.preventDefault();
        var fieldNum = this.id.charAt(this.id.length-1);
        var fieldID = "#field" + fieldNum;
        $(this).remove();
        $(fieldID).remove();

    });

Answer 1

如果您的ID总是喜欢field..，请尝试正则表达式

$('.remove-me').click(function(e){
        e.preventDefault();
        var numberPattern = /\d+/g;
        var fieldNum = this.id.match( numberPattern ).join('');
        var fieldID = "#field" + fieldNum;
        console.log(fieldNum)
        $(this).remove();
        $(fieldID).remove();

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn remove-me"id="field10">10</a>
<a class="btn remove-me"id="field1">1</a>

Answer 2

[您似乎只剪切了id的最后一个字符，如this.id.length - 1所示。你可以尝试这样的事情：

$('.remove-me').click(function(e) {
    if (this.id.match(/[0-9]+$/)) {
        e.preventDefault();

        var fieldNum = this.id.match(/[0-9]+$/)[0];
        var fieldId = '#field' + fieldNum;

        $(this).remove();
        $(fieldId).remove();
    }
});

通过与/[0-9]+$/匹配，您可以在id的末尾截断任何数字字符串。

Answer 3

您仅获得ID的最后一位，因此不适用于两位数。如果您喜欢丑陋的解决方案，并且有些编码员喜欢这种方法，请使用正则表达式。但是，如果您希望生活中有一点点优雅，请使用36底数（0-9A-Z），以便在用尽之前有更多的个位数。

Answer 4

我想你实际上是这个意思

$('.remove-me').on("click", function(e) {
  e.preventDefault();
  $(this).closest("li").remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>0 <button type="button" class="remove-me">Remove</button></li>
  <li>1 <button type="button" class="remove-me">Remove</button></li>
  <li>2 <button type="button" class="remove-me">Remove</button></li>
  <li>3 <button type="button" class="remove-me">Remove</button></li>
  <li>4 <button type="button" class="remove-me">Remove</button></li>
</ul>

不是这个

$('.remove-me').on("click", function(e) {
  e.preventDefault();
  const $first10 = $(this).next().find("li").slice(0,10);
  $("ul").html($first10)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="remove-me">Remove from 10</button>
<ul>
  <li>0 </li>
  <li>1 </li>
  <li>2 </li>
  <li>3 </li>
  <li>4 </li>
  <li>5 </li>
  <li>6 </li>
  <li>7 </li>
  <li>8 </li>
  <li>9 </li>
  <li>10 </li>
  <li>11 </li>
  <li>12 </li>
</ul>