troubleshooting Question
jQuery: Appending content REMOVES previously appended content
hankknight
asked on
asked on
There is a bug with my code. If you add an item and then make a selection, content is appended. The problem is that if you add another item and make another selection, the content which was previously appended is removed. No content should be removed, even when additional content is added.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Demo
</title>
<style type="text/css">
div.item {
background:#eee;
display:block;
margin:10px;
padding:10px 10px 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>If you add an item and select an option, content added by previous selections should NOT be removed.</h1>
<div id="items">
<div class="item" id="first">
<p>
<label for="serviceItem1">
Item:
</label>
<select id="serviceItem1" name="serviceItem1" class="selectService">
<option value="">
--- Please Select ---
</option>
<option value="a">
a
</option>
<option value="b">
b
</option>
<option value="c">
c
</option>
</select>
</p>
</div>
</div>
<p>
<input id="addItem" type="button" value="Add Item" />
</p>
<div id="itemCage">
<!-- <div class="a serviceStuff">
<p>a</p>
</div>
-->
<!-- <div class="b serviceStuff">
<address>b</address>
</div>
-->
<!-- <div class="c serviceStuff">
<p>Item C</p>
</div>
-->
</div>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$('input').attr('checked', false);
$('select.selectService').val('');
selectService();
var ci = 1;
var u = $('#first').html();
$('#addItem').click(function() {
ci++;
var cii = 1;
while ($('#items').html().indexOf('Item' + cii) !== -1 && cii < 9999) cii++;
$('#items').append('<div class="item" id="added' + ci + '">' + u.replace(/Item1/g, "Item" + cii) + '</div>');
$('#added' + ci).hide();
$('#added' + ci + ' span').hide()
$('#added' + ci).slideDown(400, function() {
$(this).css('height', 'auto')
});
selectService();
if ($('div.item').size() > 4) {
$('#addItem').css('display', 'none');
$('.later').css('color', '#fa0000')
}
});
});
function selectService() {
$('select.selectService').unbind('change');
$('select.selectService').change(function() {
$('.serviceStuff').remove();
showComments(this, $(this).val());
});
}
function showComments(t, _class) {
var r = new RegExp('<([^\\s]+)[^>]*class="' + _class + '([\\S\\s]*?)</\\1>', 'g');
var uncommented = $("#itemCage").html().match(r);
if (uncommented) {
var ci = String($(t).parent().find('label').first().attr('for').substr(11));
$(t).parent().append(String(uncommented[0].replace('Item1', 'Item' + ci)));
}
}
/* ]]> */
</script>
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.