Question

我想知道如何删除选择某个单选按钮后出现的代码。我有它生成但是当我删除它时整个身体消失所以，我只需要删除片段。

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

Answer 1

您没有正确使用.remove()。您需要找到您的片段，将其放入jQuery对象，然后在该jQuery对象上调用.remove()。

假设，只有一个片段具有你给它的id，它可以像这样简单：

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

删除您提供id="appended"的片段。

或者，如果您仍然拥有要删除的根的DOM元素，则可以执行以下操作：

$(fragment).remove();

Answer 2

如果这是你要问的，这就是我删除一些元素的方法 - 你需要知道要删除的div的名称。请参阅下面的代码，并更改为您的值

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

Answer 3

这将修复您的代码，我在此处进行了测试：http://jsfiddle.net/gJk7J/

简单地改变： document.body.remove(fragment); 至： if(fragment.parentNode)fragment.parentNode.remove(fragment);

Answer 4

1

当你这样做时：

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

片段的子节点中的元素变成了document.body的子节点。因此片段不再有子节点。你必须找到你创建的元素（jQuery或getElementxxxxxs）并删除它们。

2

您想要从正文中删除元素的方式不正确。

document.body.remove(fragment);

你可以这样做：

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

删除插入的HTML代码

4 个答案: