javascript - .remove() 在 jQuery 中不起作用

Question

我正在使用 jQuery，它不想删除我拥有的输入元素。脚本的其余部分运行良好，它似乎忽略了我给它的 .remove() 命令。

所以基本上我有一些 div (在 foreach 语句中复制)，其中我有一个 documentTitle 类，其中内部是文档标题的打印值。单击时，它会丢失 div 并将 div 的值放入输入字段中，这是该部分的特定脚本:

function divClicked() {
    var divHtml = $(this).html();
    var editableText = $("<input class='form-control controlTitle' name='title'>");
    editableText.val(divHtml);
    $(this).closest(".documentTitleHover").addClass('editing');
    $(this).siblings( ".fa-check" ).removeClass('hidden');
    $(this).replaceWith(editableText);
    editableText.focus();
}

现在我的问题是，当单击右上角部分的一个小复选标记时会发生什么，发生了很多事情，并且它们工作完美(包括ajax部分)，但唯一一个拒绝工作的是.remove();

这是特定的脚本:

$("span.fa.fa-check").click(function () {
  var checkMarkSpan = $(this);
  var parentDocumentDiv = checkMarkSpan.closest("div.document");

    var html = $(this).siblings( "input[name='title']" ).val();
    var viewableText = $("<div class='documentTitle'>");
    $(this).closest(".documentTitleHover").removeClass('editing');
    $(this).siblings( ".fa-check" ).addClass('hidden');
    viewableText.html(html);
    $(this).replaceWith(viewableText);
    $(this).siblings(".controlTitle").remove();
    // setup the click event for this new div
    viewableText.click(divClicked);

  // now do the Ajax. Notice how the inputs are searched below the div, not everywhere ($)
  $.ajax({
            type:'POST',
            url: '/carrier/claims/files/updateFile',
            data: {
                'attachmentID': parentDocumentDiv.find('input[name=attachmentID]').val(),
                'title': parentDocumentDiv.find('input[name=title]').val(),
               '_token': parentDocumentDiv.find('input[name=_token]').val(),
            },
            success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Changed Title Successfully To '+data.claim.title, 'Success Alert', {timeOut: 5000});
                       $('#existing_consignee_details').html(
'<strong>'+data.customer_name+'</strong><br>'+data.billing_address_1 +' '+data.billing_address_2 +'<br>'+data.billing_city +', '+data.billing_state + ' '+data.billing_zipcode+'<br><br><a href="/customers/i/'+data.id+'" target="_blank"><button type="button" class="btn btn-primary btn-sm">View Customer Details</button></a>' );

                    }
                },

                error: function (jqXHR, textStatus, errorThrown) {
                  if (jqXHR.status == 500) {
                      alert('Internal error: ' + jqXHR.responseText);
                  } else {
                      alert('Unexpected error.');
                  }
                }
            });
});

在顶部附近的第二个脚本 block 中，您可以在底部附近看到 .remove。

对于 HTML，在实际单击 div 之前，这是单个“文档”的样子:

<div class="documentTitleHover">
                                <div class="documentTitle">Document 14</div>
                                    <span class="fa fa-edit"></span>
                                    <span class="fa fa-check hidden"></span>
                            </div>

这就是点击 div 后的样子:

<div class="documentTitleHover editing">
                                <input class="form-control controlTitle" name="title">
                                    <span class="fa fa-edit"></span>
                                    <span class="fa fa-check"></span>
                            </div>

这就是单击复选标记后的样子:

<div class="documentTitleHover">
                                <input class="form-control controlTitle" name="title">
                                    <span class="fa fa-edit"></span>
                                    <div class="documentTitle">Document 15</div>
                            </div>

正如您从我的脚本中看到的，当单击复选标记时，输入应该被删除，但它保留在新创建的 div 之上。

Answer 1

问题是您将 this 元素替换为另一个元素，因此 $(this).siblings(".controlTitle") 不会t 返回任何元素(this 不再具有类 controlTitle 的同级元素)。

要修复此问题，您可以在替换 span 之前删除 input:

$(this).siblings(".controlTitle").remove();
$(this).replaceWith(viewableText);

或者更改查找输入的方式

$(this).replaceWith(viewableText);
viewableText.siblings(".controlTitle").remove();