Question

我有一张输入名称和详细信息的表格。我已经从一个按钮创建了新的字段，但我不能删除我创建的任何人，除了原始的。我尝试增加span类名称以帮助删除但没有。请帮助我解决它。提前谢谢..

我的原始数据表

<span class="source">
    <span id="sprtdiv" class="tab1">
        <table width="90%" border="1">
            <tr><td><input type="text" class="yuzdeyetmis" name="partname[]" value="" id="pname" placeholder="Name" /><div id="tab1" class="yuzdeotuz"> DELETE </div></td></tr>
            <tr><td><textarea rows="3"  name="partdetay[]" id="pdetay" placeholder="Detail"></textarea></td></tr>
       </table> 
    </span>
</span>
<input type="button" id="add_more_part" class="upload" value="Add New Record"/>

我想添加和删除新的数据部分

$(".yuzdeotuz").click(function(){
    var strtab = $(this).attr('id');
    alert(strtab );
    $("."+strtab).remove();

});
//  To add new bolum stream source field dynamically, on click of "Add More Source" button 
$('#add_more_part').click(function() {

    var tabcount = $('.yuzdeotuz').length;
    if (tabcount == 1 || tabcount != 1)
    {
        tabcount++; 
        mytab = "tab"+tabcount;
    }

    $(".source").append('<span id="sprtdiv" class='+mytab+'><table width="90%" border="1"><tr><td><input type="text" class="yuzdeyetmis" name="partname[]" value="" id="pname" placeholder="Name" /><div id='+mytab+' class="yuzdeotuz"> DELETE </div></td></tr><tr><td><textarea rows="3"  name="partdetay[]" id="pdetay" placeholder="Detail"></textarea></td></tr></table> </span>');
});

我的工作代码https://jsfiddle.net/c71Lmkeh/2/`

Answer 1

如果需要将事件添加到插入DOM的元素中，则需要使用.on（）函数。检查this link，它将解决您的问题

Answer 2

这并不优雅。我添加了这个函数（必须将它添加到Window中 - 显然它是一个jsFiddle的东西。）

window.deleteRecord = function(deleteButton) {
  var deleteButtonRow = $(deleteButton).closest("tr");
  var textAreaRow = deleteButtonRow.next("tr");
  deleteButtonRow.remove();
  textAreaRow.remove();
}

然后去＆＃34;删除＆＃34; div我添加了

onclick = "deleteRecord(this);"

如果元素不跨表行传播会更容易一些，因为这意味着必须删除两个表行。现在只使用div更常见，所以一条记录的所有元素都在一个div中，你只需删除它。

所以在这种情况下我要删除＆＃34;删除＆＃34;的行。 div在和下一行。

Answer 3

这是你正在寻找的吗？

Demo + Source code

JavaScript的：

  $(".add").on("click", function() {
    var newDiv = $("<div class='details'><div class='inputs'><input type='text' class='input1'/><br/><br/><input type='text' class='input2'/></div><div class='button'><a href='#' class='delete'>Delete</a></div><br/></div>")
    $(".source").append(newDiv);
    $(newDiv).on("click", "a", function() {
      $(newDiv).remove();
    });
  });

使用jquery通过id删除创建的元素

3 个答案: