如何删除 javascript 中的 append 子元素

Question

<label id="1" >a</label><label id="2" > b </label>

我创建了两个标签。 单击 label 时，我会在其中创建一个div元素。 现在，如果再次单击 label，我需要删除创建的div元素。

if (click == 1) {
    var prevWin = document.createElement("div");
    prevWin.id = 1;
    prevWin.innerHTML = outMsg;
    document.body.appendChild(prevWin);
} else {
    var prevWin = document.body.getElementsById(1);
    document.body.removeChild(prevWin);
}

单击 label 时， div元素创建成功。 但是当它再次被点击时， div元素并没有被移除。

Answer 1

function labelOnClick () {
    var divs = this.getElementsByTagName("div");

    if (divs.length) {
        divs[0].parentNode.removeChild(divs[0]);
    } else {
        var div = document.createElement("div");
        div.innerHTML = outMsg;

        this.appendChild(div);
    }
}

ids在整个 DOM 中必须是唯一的； 在您的示例中，看起来您将拥有 label 和具有相同 ID 的 div。 你可以很容易地 append 一个字符串到div id，如果你希望它有一个 id ( div.id = this.id + "_div" )。

如果您的 label 中有多个 div，我的示例将不起作用； 在这种情况下，ID 方法将是最好的（或使用选择器库）。

可以按如下方式处理 ID：

function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    var div = this.getElementById(makeDivId(this.id));

    if (div) {
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = outMsg;
        div.id = makeDivId(this.id);

        this.appendChild(div);
    }
}