使用jquery删除id创建的元素

Remove created element by id using jquery

本文关键字：元素 创建 id jquery 删除 使用      更新时间：2023-09-26

我有一个表，用于输入名称和详细信息。我已经从一个按钮创建了新的字段，但除了原始字段外，我不能删除我创建的任何字段。我尝试增加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/`

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

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

然后在"删除"div中，我添加了

onclick = "deleteRecord(this);"

如果元素不分布在表行中，这会稍微容易一些，因为这意味着必须同时删除两个表行。现在只使用div更为常见，因此一条记录的所有元素都在一个div内，只需删除即可。

因此，在本例中，我将删除"delete"div所在的行和下一行。

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

这就是您想要的吗？

演示+源代码

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();
    });
  });
相关文章：