jquery - 使用按钮在单击事件上添加和删除 Div 元素

Question

所以基本上这是代码：

HTML：

<button id="addHotel" type="button"> Add Hotel </button>
<div id="moreProd"> </div>

jQuery（版本 1.7）：

var i = 0;
$('#addHotel').click(function () {
    $("<div><div>Hotel Name:</div><div>-</div></div>").attr({
        'id': i,
        class: "addHotel"
    }).addClass('H').appendTo('#moreProd');
    i++;
});
$('#moreProd').on('click', '.H', function () {
    $(this).remove();
});

实现：使用此代码，我可以单击酒店名称或减号 (-)，它将删除整个 div 元素。

目的：我不想点击酒店名称并删除整个 div 元素（酒店名称和减号）。我只想单击减号以删除 div（酒店名称和减号一起）。

我该如何做到这一点？

Answer 1

尝试这个。仅在减号上添加点击事件

var i = 0;

$('#addHotel').click(function () {
    $("<div><div>Hotel Name:</div><div class='minus'>-</div></div>").attr({
        'id': i,
        class: "addHotel"
    }).addClass('H').appendTo('#moreProd');
    i++;
});
$('.minus').on('click', '.H', function () {
    $(this).closest('.H').remove();
});