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

Remove Row with Button Event Handlers

本文关键字：程序 删除行 事件处理 按钮      更新时间：2023-09-26

好的，所以我需要删除按钮的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')
}

既然您标记了jQuery，我假设您可以使用jQuery解决方案:

添加一个class="remove"到你的按钮，并使用这个javascript。

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

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

html 

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

js 

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

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);
}

演示小提琴

相关文章：