I am dynamically inserting div elements within a parent div but when an end-user clicks on that inserted div (via clickable text), it removes it from the HTML. The code I have currently works in Safari 4.0.3 and Firefox 3.5.5 but does not work in any versions of IE7 or IE8.

Here is the jquery code:

remove_item:function(id, display, type) {

var proTagID = '#search-box-pro-'+id;

var topicTagID = '#search-box-topic-'+id;

var proTextID = "." + type + "-" + id;

var topicTextID = "." + type + "-" + id;

switch (type) {

Remove search term from search box

case 'pro':

$(document).ready(function() {

$(proTagID).bind("click", function() {

$('.pro-'+id).remove();

if ($('.added-search-terms').children().length == 0) {

deactivateSearch();

}

$('#pro-name-link-'+id).css('color', '#ffffff');

loadData.reactivate_link(id, display, type);

});

});

break;

Remove search term from search box

case 'category':

$(document).ready(function() {

$(topicTagID).bind("click", function() {

$(topicTextID).remove();

if ($('.added-search-terms').children().length == 0) {

deactivateSearch();

}

$('#topic-results-link-'+id).css('color', '#ffffff');

//alert(id);

loadData.reactivate_link(id, display, type);

});

});

break;

}

},

And the HTML:

<div class="search-window">

<div id="wn">

<div id="lyr" class="content"><span class="search-terms-title"><?= $this->search_terms ?>: <span id="added-search-terms-list" class="added-search-terms"> </span></span></div>

</div>

<div id="scroll_links">

<div id="scrollUp">

<img src="images/global/widgets/ftpa-video-finder/arrow-up.png" height="7" width="8" alt="Arrow Up" class="search-arrow-up"/>

</div>

<div id="scrollDown">

<img src="images/global/widgets/ftpa-video-finder/arrow-down.png" height="7" width="8" alt="Arrow Down" class="search-arrow-down" />

</div>

</div>

</div>

I have also attached the whole file. Any help with this would be much appreciated! Thanks!