javascript - 当一个 div 被移除时，按钮停留在最后一个 div

Question

我正在尝试修复我的 jQuery 代码。我只想在最后一个 div 中添加“添加内容”按钮。如果删除了一个 div，按钮将保留在最后一个 div 中。请提出建议。

var i = 1;
var deletedDivs = 0;
var createdDivs = 0;
$(document).ready(function () {
    $(document).on('click', '.addcontent', function () {
        if (i == 1) $(".question").html('');
        $(".hide_button").remove();
        $(".question").append('<div class="new-question" id="question' + i + '" name="question' + i + '"><div class="deleteButton" id="question' + i + '">Remove</div><b>Question ' + i + '</b><br> This is div text <br> <button class="addcontent hide_button' + i + '">Add content</button></div>').show('slow');
        createdDivs++;
        i++;
    });
    $(document).on('click', '.deleteButton', function () {
        var id = $(this).attr("id");
        $("#" + id).remove();
        deletedDivs++;
        if (createdDivs == deletedDivs) {
            i = 1;
            $(".question").append('<button class="addcontent hide_button">Add content</button>').show('slow');
        }
    });
});

HTML:

<div class="question">
    <button class="addcontent hide_button">Add content</button>
</div>

Answer 1

试试这个:

将您的按钮移出您的div:

HTML:

<div class="question">

</div>
<button class="addcontent hide_button">Add content</button>

JS:

var i = 1;
var deletedDivs = 0;
var createdDivs = 0;
$(document).ready(function () {
    $(document).on('click', '.addcontent', function () {
        if (i == 1) $(".question").html('');
        $(".question").append('<div class="new-question" id="question' + i + '" name="question' + i + '"><div class="deleteButton" id="question' + i + '">Remove</div><b>Question ' + i + '</b><br> This is div text <br></div>').show('slow');
        createdDivs++;
        i++;
    });
    $(document).on('click', '.deleteButton', function () {
        var id = $(this).attr("id");
        $("#" + id).remove();
        deletedDivs++;
        if (createdDivs == deletedDivs) {
            i = 1;
        }
    });
});

JSFIDDLE:http://jsfiddle.net/ghorg12110/a7L3cn1a/1/