Question

function removeDOM() {
debugger;
alert('sahd');
}

<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(); return false;" />
    </div>

上面是我的代码，它呈现三个标签和三个按钮。如果我点击第一个按钮，则应删除Abcd1标签。

我可以在removeDOM函数中使用以下代码吗？

$(this).parents('label').remove();

Answer 1

您需要将点击的元素传递给函数

<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
</div>

然后

function removeDOM(el) {
    el.parentNode.removeChild(el.previousElementSibling)
}

演示：Fiddle - 支持IE＆gt; = 9

Answer 2

更新onclick以将this传递到函数中：

onclick="removeDOM(this); return false"

...然后在removeDOM内，您可以使用参数previousSibling或previousElementSibling属性。

function removeDOM(element) {
    element.previousElementSibling.remove();
}

假设兄弟姐妹在那里。如果不是：

function removeDOM(element) {
    if (element.previousElementSibling) {
        element.previousElementSibling.remove();
    }
}

实例：

＆＃13;

function removeDOM(element) {
    if (element.previousElementSibling) {
        element.previousElementSibling.remove();
    }
}

＆＃13;

<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
</div>

＆＃13;

如果您需要支持较旧的浏览器，则可能没有previousElementSibling或remove，这会让事情变得复杂：

function removeDOM(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // Element
            prev.parentNode.removeChild(prev);
            break;
        }
    }
}

实例：

＆＃13;

function removeDOM(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // Element
            prev.parentNode.removeChild(prev);
            break;
        }
    }
}

＆＃13;

<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
</div>

＆＃13;

Answer 3

您可以使用element.previousSibling执行此操作，请尝试以下代码：

  function removeDOM(button) {
    var previuosLabel;
    // always remove the white space between the button and the label
    while((button.previousSibling).nodeType !== 1) { 
            button.parentNode.removeChild((button.previousSibling));
    } 
    previuosLabel=button.previousSibling;
    if(previuosLabel.nodeType === 1) { 
        button.parentNode.removeChild(previuosLabel);
    }  
  }

然后这样称呼：

<input type="button" onclick="removeDOM(this); return false;" />

这将始终检查button和label之间是否有空格，并在删除label之前将其删除，在这种情况下，请确保标签为被删除。

Here is a working Fiddle

如何在单击按钮时删除DOM元素

3 个答案: