javascript - 使用按钮事件处理程序删除行

Question

好的，所以我需要删除按钮的row/div onclick。到目前为止我有这个:

<h2>Header 3</h2>

    <div id="results3" class="results">
        <h1>Results 3</h1>
        <div id="1">Item 1 <button type="button" onclick="remove()">Remove</button></div>
        <div id="2">Item 2 <button type="button" onclick="remove()">Remove</button></div>
        <div id="3">Item 3 <button type="button" onclick="remove()">Remove</button></div>
        <div id="4">Item 4 <button type="button" onclick="remove()">Remove</button></div>
    </div>

正如您所看到的，这一切都写入了我的 html 中，onclick="remove()" 仅删除了按钮，而不是整行，这是我的问题。

由于将所有这些都放在 html 中是不好的做法，我还想知道如何将事件处理程序分配给我的 javascript 中的按钮。

JS 脚本:

function() {

    var results = document.getElementById('results3');
    var buttons = results.getElementsByTagName('button')
}

Answer 1

既然您标记了 jQuery，我认为 jQuery 解决方案适合您:

将 class="remove" 添加到您的按钮，并使用此 javascript。

$(function() {
    $('button.remove').click(function() {
         $(this).closest('div').remove();
    });
});

演示: http://jsfiddle.net/TgBKM/