Remove Inserted HTML Code

Question

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>

Careful when injecting elements via innerHTML. Not only will it make it harder to get newly generated content out of wherever it was placed, but a slew of other problems can occur (event listeners breaking, selectors breaking due to bad markup, etc.) You should (almost) always add elements with appendChild or insertBefore. I'll leave the answer to a jQuery expert that knows how to do this through the library. — Jeffrey Sweeney
– Jeffrey Sweeney, Commented Jan 24, 2013 at 4:47

jfriend00 · Accepted Answer · 2013-01-24 04:56:37Z

1

You aren't using .remove() correctly. You need to find your fragment, get it into a jQuery object and then call .remove() on that jQuery object.

Assuming, there is only one fragment with the id you've given it, it can be as simple as this:

$("#appended").remove();

to remove the fragment that you gave the id="appended" to.

Or, if you still have the DOM element that's the root of what you want to remove, you can do this:

$(fragment).remove();

edited Jan 24, 2013 at 4:56

answered Jan 24, 2013 at 4:48

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ultimater · Accepted Answer · 2013-01-24 04:51:00Z

0

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);

answered Jan 24, 2013 at 4:51

Ultimater

4,7482 gold badges32 silver badges44 bronze badges

Comments

Andrew · Accepted Answer · 2013-01-24 04:48:34Z

0

If this is what you are asking, this is how I remove some elements-- you need to know the name of div which you want to remove. See code below, and change to your values

 var removeDiv= document.getElementById("your-div-id");
                if (typeof removeDiv !== "undefined"){
                    if (removeDiv !==  null){                    
                        document.getElementById('your-root-div-id').removeChild(removeDiv);
                    }

answered Jan 24, 2013 at 4:48

Andrew

7,82813 gold badges68 silver badges120 bronze badges

Comments

KiddKai · Accepted Answer · 2013-01-24 05:34:49Z

0

1.

When you did it:

document.body.insertBefore(fragment, document.body.childNodes[0]);

the elements in the fragment's childnodes were became to the childnodes of document.body.So the fragment have no childnodes any more. You have to find the elements which you create(jQuery or getElementxxxxxs) and remove them.

2.

The way you want to remove the element from body is not correct.

document.body.remove(fragment);

you can do it like these:

document.body.removeChild(someChildNode); // dom api
$([elem/selector]).remove();              // jQuery

answered Jan 24, 2013 at 5:34

KiddKai

213 bronze badges

Collectives™ on Stack Overflow

Remove Inserted HTML Code

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related