如何删除附加元素？答案

【问题标题】：How can i remove an appended element?如何删除附加元素？
【发布时间】：2017-11-25 06:27:05
【问题描述】：

我正在 javascriptissexy.com 做一个练习，这个练习是建立一个测验器。我试图根据变量页面值显示一个问题，问题存储在数组对象中，当单击下一个按钮时，页面变量增加 1，并且下一个问题与其选项一起显示。

我想要做的是在单击下一个按钮后，删除上一个附加的问题及其选项.. 我该怎么做？

function createQuiz(crPage) {
    textNode = Allquestions[indexController].question;
    switch (crPage) {
        case 0:
            $("legend").append(textNode);
            appendChoices()
            break;
        case 1:
            $("legend").append(textNode);
            appendChoices()
            break;
        case 2:
            $("legend").append(textNode);
            appendChoices()
            break;
        case 3:
            $("legend").append(textNode);
            appendChoices()
            break;
        case 4:
            $("legend").append(textNode);
            appendChoices()
            break;
        case 5:
            $("legend").append(textNode);
            appendChoices()
            break;
        case 6:
            $("legend").append(textNode);
            appendChoices()
            break;

        default:
            // code

    }
}


function appendChoices() {
    for (var i = 0; i < Allquestions[indexController].choices.length; i++) {
            console.log(Allquestions[indexController].choices[i]);
    }
}

【问题讨论】：

标签： javascript jquery html css dom-manipulation

【解决方案1】：

你可以使用 .replaceWith() 而不是每次都使用 .append()，而不是 $("legend").children()。

例如，每种情况下的代码如下所示：

$("legend").children().replaceWith(textNode);
appendChoices()
break;

它将在每种情况下替换$("legend") 内容。

编辑：

或者最好的方法是像这样使用 .html() 方法：

$("legend").html(textNode);
appendChoices()
break;

注意：

我看到您在每种情况下都在做同样的事情，通过使用相同的语句，switch 块的目的是什么？

【讨论】：

这不是使用建议的 empty() 而是包装在函数中好吗？所以我可以在每种情况下调用该函数？像这样function appendQuestion(){ $('legend').empty() .append(textNode); }
@Jcan 这里没有什么好处，它们只是两种做事方式，但我认为最好的方法是使用.html() 方法，请参阅我的编辑。

【解决方案2】：

不确定您是否使用 jQuery，但是；使用 jQuery empty() 函数，您可以轻松删除之前添加的问题，例如：

$('legend').empty();

您可以在这里找到更多信息：jQuery API empty() function

【讨论】：