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-solution：

在按钮中添加class="remove"，并使用此javascript。

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

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

Answer 2

<强> HTML

<div id="1">Item 1 
    <button type="button" onclick="remove(this)">Remove</button>
</div>

js

 function remove(removeMe)
  {
      $(removeMe).remove();
  }

Answer 3

HTML 的

<button type="button" onclick="remove(this)">Remove</button>

的Javascript

var remove = function(btn){
    btn.parentNode.style.display="none";
    //Remove the div
    //var div =  btn.parentNode;
    //div.parentNode.removeChild(div);
}

Demo Fiddle

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

3 个答案: