Question

如何从表中删除之前使用删除按钮创建的行？

我需要向btnDeleteOther添加一个事件来删除当前选中的行。我还需要知道如何更改每个创建的文本框的id，并使用变量来填充文本框的值（但我想在其他问题中我不得不问）。

代码示例：

<html>
<head>
<script type="text/javascript">
   function createNewRow (text1,text2){
    $(document).ready(function(){
    $('#tblOtherParties > tbody').append('<tr><td>
    <input type="text" id="title1" value=""/>
           </td><td>
       <input type="text" id="title2"/>
       </td><td>
       <input type="button" id="btnDeleteOther" value="X"/>
       </td></tr>');
    });
     }
</script>
</head>
<body>
<table style="float:left" id="tblOtherParties">
  <thead>
     <tr>
     <th>Title1</th>
     <th>Title2</th>
     <th>
      <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>
     </th>
    </tr>
       </thead>
      <tbody>
         <tr>
           <td>
        <input type="text" id="title1"/>
           </td>
           <td>
        <input type="text" id="title2"/>
           </td>
           <td>
        <input type="button" id="btnDeleteOther" value="X"/>
           </td>
         </tr>
      </tbody>
    </table>
</body>
</html>

Answer 1

由于您可以有多个删除按钮，因此应使用类名来标识它们，而不是ID。（例如，<input type="button" class="DeleteButton" value="X"/>）

然后您可以写下以下内容：

$('.DeleteButton').live('click', function() {
    $(this).closest('tr').remove();
});

编辑：为防止最后一行被删除，您可以写

    $(this).closest('tr').not(':only-child').remove();

要填充文本框，您可以编写以下内容:(请注意，这些也需要类名而不是ID）

var newRow = $('<tr>...</tr>');
newRow.find('.Title1').val(title1);
newRow.find('.Title2').val(title2);
newRow.appendTo($('#tblOtherParties > tbody'));

Answer 2

$("#btnDeleteOther").live("click", function(){
  $(this).closest("tr").remove();
});

Answer 3

您应该为删除按钮指定每行或类的唯一ID，而不是为其指定固定ID。 HTML中的元素ID必须是唯一的。我建议给它一个课，然后应用@Jonathan建议的基于类的选择选择器。正如@Mark指出的那样，同样适用于您的文本框。在我的示例中，我将其更改为使用名称而不是ID，但也许它们也需要是唯一的。根据需要进行调整以适应您的情况。

$(function() {
   $('.deleteButton').live( 'click', function() {
       $(this).closest('tr').remove();
   });
});
function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td>' +
       + ' <input type="text" name="title1" value=""/>'
       + '</td><td>'
       + '<input type="text" name="title2"/>'
       + '</td><td>'
       + '<input type="button" class="deleteButton" value="X"/>'
       + '</td></tr>'); 
    }); 
}

Answer 4

对于较旧的jQuery，你可以做

$("#btnDeleteOther").click(function() {
    $(this).parents("tr").remove();
});

另外，要更改文本框的ID，您可以在注入时执行以下操作

var content = $("<CONTENT>");
content.find("#title2").attr("id", "title" + something);
$('#tblOtherParties > tbody').append(content);

Answer 5

除了删除行外，还有其他问题。

此：

   function createNewRow (text1,text2){ 
    $(document).ready(function(){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" id="title1" value=""/> 
           </td><td> 
       <input type="text" id="title2"/> 
       </td><td> 
       <input type="button" id="btnDeleteOther" value="X"/> 
       </td></tr>'); 
    }); 
     }

最好写成：

function createNewRow (text1,text2){ 
    $('#tblOtherParties > tbody').append('<tr><td> 
    <input type="text" class="title1" value=""/> 
           </td><td> 
       <input type="text" class="title2"/> 
       </td><td> 
       <input type="button" class="btnDeleteOther" value="X"/> 
       </td></tr>'); 
     };

和

  <input type="button" id="btnAddOther" title="Add" value="Add" onclick="javascript:createNewRow();"/>

用

清理它

  <input type="button" id="btnAddOther" title="Add" value="Add" >

然后使用jQuery来表现你想要的行为

$(document).ready(function(){
    $('.btnDeleteOther').live('click', function() {  
        if ($('.btnDeleteOther').length > 1)
        {
           $(this).closest('tr').remove();               
        }; //added this based on comments to other answer- always leaves one row in
    }); 
    $('#btnAddOther').click(function()
    { 
       createNewRow();
    });
});

编辑：我的巨大假设是你可能希望在添加行时将文本传递给输入，因为你在那里有（text1，text2）...

要做到这一点，你需要一个来源，然后你可以这样做：

var mytext1 = "default stuff for 1";
var mytext2 = "default stuff for 2";

function createNewRow (){ 
        $('#tblOtherParties > tbody').append('<tr><td> 
        <input type="text" class="title1" value=""/> 
               </td><td> 
           <input type="text" class="title2"/> 
           </td><td> 
           <input type="button" class="btnDeleteOther" value="X"/> 
           </td></tr>'); 
           $('tr:last').find('.title1').val(mytext1);
           $('tr:last').find('.title2').val(mytext2);
        };

Answer 6

您似乎正在追加id =“btnDeleteOther”的项目。因此，您似乎可以拥有多个具有相同ID的项目。你应该给附加的id一个唯一的id [保持计数/附加时间戳/等]。

将单击事件附加到按钮，然后在tr上调用remove。使用类似的东西： $（本）.closest（ 'TR'）隐藏（）。

此外，由于您将添加新项目，因此您可能希望查看.live（）以便新项目获得点击事件。

jQuery删除以前添加的当前行

6 个答案: