点击功能删除随机ID

我正在建设的计划是：您可以点击一个按钮来创建一些房屋，他们将被分配一个随机ID。 （我知道现在不是唯一的ID）。点击功能删除随机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删除房屋。我可以添加班级。房屋，但所有房屋都将被删除。

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

来源

2013-09-24 Adnaves

请注意，你有，如果你希望你的ID，以能够开始与一些使用HTML5。以前的版本要求ID以字母开头。 –

实际上并不知道。谢谢。 – Adnaves

我会使删除按钮静态标记，所以你不必追加它或绑定多次点击处理程序。然后我会使用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(); 
});

来源

2013-09-24 19:43:44

谢谢杰森，这个作品很棒！现在我只需要隐藏按钮，直到房子被点击并且我全部设置完毕。 :-) – Adnaves

为此，我会先让按钮的css为'display：none;'，然后将它显示在'.House'单击处理程序中，并再次将它隐藏在'＃DeleteHouse'单击处理程序中。 –

通过JSFiddle，如果您想要从右侧删除div，您可以尝试删除单击事件的启动器。为了防止在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(); 
     }); 
});     
});

来源

2013-09-24 19:43:57

非常感谢！我希望我能够接受2个答案。 – Adnaves

点击功能删除随机ID

回答

相关问题