0

So, I have an ajax call with async set to false to load content into a particular div. Among this content there is a button with id='cancelbtn. Problem is, if I call remove, it is not removed, even though the console prints the element correctly one line before. Weirdly, if I repeat the remove line a number of times, then it works 'as expected'. Any ideas? The code from the ajax call is:

    $.ajax ({
    url: 'contentincludingthecancelbtn.html',
    async: false,
    success: function(data){
        $('#divCont').html(data); 
        console.log($('#cancelbtn'));
        $('#cancelbtn').remove();
    });
    });

The button displays at the end. This used to be a direct load call (not working either) changed in order to try async:false but no luck.

1
  • one question, do you have just one id with cancelbtn? Do you check this? Commented Sep 12, 2014 at 0:50

3 Answers 3

2

Maybe you have two elements with the same ID, so the jQuery is removing the first one and then the second (the one you want to remove).

To solve this you could change the element's ID or try this code:

$('#divCont').find('#cancelbtn').remove();
4
  • i thought so... but then printed all elements with the id and there is only the one. Thanks for your time though!
    – diegales
    Commented Sep 12, 2014 at 0:40
  • If that's what's happening, you should probably change your document to eliminate the duplicate id, rather than working around it.
    – recursive
    Commented Sep 12, 2014 at 0:40
  • have also tried the find approach... actually i re-edited the code back from it to post the question here
    – diegales
    Commented Sep 12, 2014 at 0:41
  • 1
    oh god... i'm sorry for waisting your time.. and you are absolutely right... it's duplicated and had escaped me earlier... Thanks so much to the both of you, and mr Peruggia aka Johnny Bravo can have his "selected answer" as a reward!
    – diegales
    Commented Sep 12, 2014 at 0:46
1

try to remove button on complete event like this:

$.ajax ({
    url: 'contentincludingthecancelbtn.html',
    async: false,
    success: function(data){
        $('#divCont').html(data); 
        console.log($('#cancelbtn'));
        },
    complete: function(){
        $('#cancelbtn').remove();
        });
    });
2
  • thanks... it was my bad... had repeated element id.
    – diegales
    Commented Sep 12, 2014 at 0:49
  • still, do any Dom operation on the data received via ajax in complete event handler, if your data is huge or network is slow, it will break if you tried to change it in success handler.
    – Abs
    Commented Sep 12, 2014 at 0:53
0

You should be careful when using ids because they are supposed to be unique so we don't have two elements with the same id even when we have two elements with the same id for example

$('body').append('<p id="para">text</p><p id="para">text</p>');

now the following code :

$('#para').click(function(){console.log('just clicked ');});

will work just for the first element which is the first paragraph

note : $('#divCont').find('#cancelbtn').remove() : is good to make sure that we deleted all the elements with the id divCont but in the other hand it doesn't make sense because .find jquery method is used when we expect the matched elements to be greater than 1 while we know that ids should be unique so $('#divCont').remove(); is enough

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.