I am wondering how I would remove code that appears after I select a certain Radio Button. I have got it to generate but when I remove it the whole body disappears so, I would need to only remove the fragment.
<head>
<style>
input, label {
line-height: 1.5em;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<div>
<input type="radio" name="modtype" value="My Mods" id="mymods">
<label for="orange">My Mods</label>
</div>
<div>
<input type="radio" name="modtype" value="Group Mods" id="groupmods">
<label for="apple">Group Mods</label>
</div>
<div>
<input type="radio" name="modtype" value="Individual Mods" id="individualmods">
<label for="banana">Individual Mods</label>
</div>
<div id="modtype"></div>
</form>
<script>
$("input").on("click", function() {
$("#modtype").html($("input:checked").val() + " is selected! - Now Choose Mod! :)");
});
</script>
<script>
var appended = $('<div />').text('YOYOY');
var fragment = create('<div>Hello!</div><p>...</p>');
appended.id = 'appended';
$('input:radio[name="modtype"]').change(
function() {
if ($(this).val() == 'My Mods') {
document.body.insertBefore(fragment, document.body.childNodes[0]);
} else {
document.body.remove(fragment);
}
});
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
</script>
</body>
</html>
This will fix your code, I have tested it here: http://jsfiddle.net/gJk7J/
Simply change:
document.body.remove(fragment);To:
if(fragment.parentNode)fragment.parentNode.remove(fragment);