javascript - 在指定的 div 之后使用函数删除 div

Question

HTML:

<div class="page">111111</div>
<div class="page">222222</div>
<div class="page">333333</div>
<div class="page">444444</div>
<div class="page">555555</div>

JavaScript:

var div = document.getElementsByClassName("page");
for (i = 0; i < div.length; i++) {
    bt = document.createElement("button");
    bt.innerHTML = "kill my followings";
    div[i].appendChild(bt);
    bt.onclick = function (i) {
        return function () {
            kill(div[i]);
        }
    }(i);
}

function kill(obj) {
    // ...
}

参见 FIDDLE在这里。

我构建了一些 class="page" 的 div。我使用 JavaScript 为每个 div 添加按钮，并为每个按钮添加 onClick 事件。

我需要删除当前运行的 div 之后的 div。例如，如果用户单击 3 号 div 中的按钮，则应删除 4 号和 5 号。 如何实现？

(如非必要，不得更改原html结构)

非常感谢!

Answer 1

这应该是最简单的方法:

function kill(obj) {
    while (obj.nextSibling) {
        obj.parentNode.removeChild(obj.nextSibling);
    }
}

演示: http://jsfiddle.net/BtSKJ/3/