Question

我正在构建的计划是：您可以单击按钮创建一些房屋，并为他们分配随机ID。 （我知道现在不是唯一的ID）。

当您点击其中一个房屋时，您将能够看到有关房屋的一些信息和DELETE按钮：

$('.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来删除房子。我可以添加类.House，但随后所有房屋都将被删除。

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

Answer 1

我会将删除按钮设为静态标记，因此您不必多次附加或绑定点击处理程序。然后，我会使用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();   
});

Answer 2

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

这样的事情：

$('.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();
        }); 
});                  
});

单击功能删除随机ID

2 个答案: