Question

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

我创建了两个标签。单击标签时，我在显示的内容中创建了一个div元素。现在，如果再次点击标签，我需要删除创建的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);
}

单击标签时，会成功创建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中独一无二;在您的示例中，看起来您将拥有标签和具有相同ID的div。如果您希望其具有ID（div），则可以轻松地将字符串附加到div.id = this.id + "_div" ID。

如果您的标签中有多个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);
    }
}

如何在javascript中删除append子元素

1 个答案: