jQuery - .remove() not working

316
March 02, 2018, at 03:07 AM

I'm working with jQuery and it doesn't want to remove an input element I have. The rest of the script goes through fine, it just seems to ignore a .remove() command I give it.

So basically I have a few div (replicated in foreach statements), and in it I have a documentTitle class where inside is the printed value of a document title. When clicked, it loses the div and puts the value of the div inside an input field, this is the particular script for that portion:

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();
}

Now my issue arises with what happens when a little checkmark in the top righthand portion is clicked, a lot of things happen, and they work flawlessly (including the ajax portion), but the one and only thing that refuses to work is the .remove();

Here is that particular script:

$("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.');
                  }
                }
            });
});

Near the top, in the second block of script, you see the .remove near the bottom.

As for the HTML, before the div is actually clicked, this is what an individual "document" looks like:

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

And this is what it looks like after the div is clicked:

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

And this is what it looks like after the checkmark is clicked:

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

As you can see from my script, when the checkmark is clicked, the input is supposed to be removed, but it stays there on top of the newly created div. I'd appreciate any ideas. Thanks! Matt

Answer 1

The problem is that you're replacing the this element with another one and because of that, $(this).siblings(".controlTitle") won't return any elements (this not longer has a sibling with class controlTitle).

To fix that you can either remove the input before you replace the span:

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

Or change the way you find the input

$(this).replaceWith(viewableText);
viewableText.siblings(".controlTitle").remove();
Rent Charter Buses Company
READ ALSO
How do I show only elements that contain an array of classes with jQuery

How do I show only elements that contain an array of classes with jQuery

I have a few elements with various options that the user can select to hide and show elements in a table

175
Using Talend tSystem to run powershell command

Using Talend tSystem to run powershell command

I need to upload a file to a siteI am using Talend tSystem component to do the same

733
Drawing Circles on random JPanels by Pressing a JButton

Drawing Circles on random JPanels by Pressing a JButton

I got a grid with JPanels, by pressing the Button on top I want a random generator to draw circles on 3 random PanelsIn theory I think I have to overwrite the PaintComponent of every JPanel with a circle, put the flag on false and when I press the button...

235
Putting SharedPrefs Editor in Utility Class?

Putting SharedPrefs Editor in Utility Class?

Is it a good idea/practice to put static shared preferences editor in a utility class so I can call it whenever needed? The method in the utility class would look like this:

270