Toggle with jQuery

Question

Greetings everyone! I want to know if its possible to find out if a div with id="contentEditDiv" excist AFTER the link i just clicked. My goal is to toggle (remove) only the ajax thats been loaded and inserted after the link.

<a href="#" class="contentEditLink" id="1">link 1</a>
<a href="#" class="contentEditLink" id="2">link 2</a>
<a href="#" class="contentEditLink" id="3">link 3</a>

$('a.contentEditLink').click(function(){
if( $('#contentEditDiv').length ) {
    $('#contentEditDiv').remove();
}
else {
    var strContentID = $(this).attr('id');
    $('#' + strContentID).after('<div id="contentEditDiv"><img src="loading.gif" /></div>');
    $('#contentEditDiv').load('test.php?contentID=' + strContentID);
}
});

Answer 1

Give a corresponding ID to each one, since you're IDs must be unique anyway (which they are not currently, if all 3 links are clicked)

$('a.contentEditLink').click(function(){    
    var strContentID = $(this).attr('id');
    if( $('#contentEditDiv' + strContentID).length ) {
        $('#contentEditDiv' + strContentID).remove();
    }    
    $('#' + strContentID).after('<div id="contentEditDiv'+strContentID+'"><img src="loading.gif" /></div>');
    $('#contentEditDiv' + strContentID).load('test.php?contentID=' + strContentID);
});

jsFiddle

Answer 2

How about:

$('a.contentEditLink').click(function(){
    if ($(this).next('#contentEditDiv').length) {
        $(this).next('#contentEditDiv').remove();
    } else {
        [...]
    }
});