单击功能删除随机ID

Click function remove random ID

本文关键字：ID 随机 删除 功能 单击      更新时间：2023-09-26

我正在建造的计划是：您可以单击按钮来创建一些房屋，它们将被分配一个随机ID。

当您单击您创建的房屋之一时，您将能够看到有关该房屋的一些信息和删除按钮：

$('.House').click(function(){
    var iDivHouseId = $(this).attr('id');
    var oHouse = findHouseId(iDivHouseId);
    $('#ShowId').text("ID: " + oHouse.getId());
    $('#ShowStreetName').text("Street name: " +oHouse.getStreetName());
    $('#ShowNumber').text("Number: " +oHouse.getNumber());
    $('#WindowDisplayPersonInfo').append('<input type="button" id="DeleteHouse" value="DELETE" />');
        $('#DeleteHouse').click(function () {
            $(?????).remove();   
        }); 
});

但是正如问号标记的那样，我不知道我必须输入什么才能通过随机创建的ID删除房屋。我可以添加类.房子，但随后所有房子都会被删除。

此外，现在，当您单击房屋几次时，会显示几个删除按钮，因为它每次都会附加一个新按钮。如何将旧按钮替换为新按钮，而不是每次都创建一个新按钮。

我会将删除按钮设置为静态标记，因此您不必多次附加它或绑定单击处理程序。然后，我将使用 data() 跟踪当前元素 id，并从您的单击处理程序中引用它。

$('.House').click(function(){
    var iDivHouseId = $(this).attr('id');
    $('#WindowDisplayPersonInfo').data('current-elem-id', iDivHouseId);
    var oHouse = findHouseId(iDivHouseId);
    $('#ShowId').text("ID: " + oHouse.getId());
    $('#ShowStreetName').text("Street name: " +oHouse.getStreetName());
    $('#ShowNumber').text("Number: " +oHouse.getNumber());
});
$('#DeleteHouse').click(function () {
    $('#' + $('#WindowDisplayPersonInfo').data('current-elem-id')).remove();   
});

通过 JSFiddle，如果您只想从右侧删除div，您可以尝试删除 click 事件的启动器。为了防止 js 中出现"this"的错误，因为它总是改变值，你可以在 click 函数中接收一个参数。

像这样：

$('.House').click(function(e){
    var iDivHouseId = $(this).attr('id');
    var oHouse = findHouseId(iDivHouseId);
    $('#ShowId').text("ID: " + oHouse.getId());
    $('#ShowStreetName').text("Street name: " +oHouse.getStreetName());
    $('#ShowNumber').text("Number: " +oHouse.getNumber());
    $('#WindowDisplayPersonInfo').append('<input type="button" id="DeleteHouse" value="DELETE" />');
        $('#DeleteHouse').click(function () {
            $(oHouse).remove();   
            $(e.target).remove();
        }); 
});                  
});
相关文章：