当删除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

试试这个:

将您button的股利出来:

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/