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移出您的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/

Answer 2

以下是更新后的工作代码。

HTML：

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

JavaScript的：

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;
        }
    });
});

Answer 3

有点难以理解你的想法，但我会在所有div中使用按钮并使用CSS来显示或隐藏按钮。

div button { display: none; }

div:last-of-type button { display: inline; }

Answer 4

如果使用CSS在最后重叠该属性，效率会更高，并且您将保留相同的元素，并且需要添加和删除它 HTML：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="content" class="content"></div>
  <button class="addcontent hide_button">Add content</button> 
</body>
</html>

的CSS：

.new-question {
  background-color: green;
  width: 300px;
  height: auto;
  position: relative;
  margin:0;
} 
.deleteButton {
  background-color: red;
  width: 50px;
  height: 50px;
  margin-left: 100%;
  position: relative;
}
.addcontent{
  z-index: 1;
  top:-25px;
  left:200px;
  position:relative;
}
.content{
  min-height:30px;
}

JS：

$(function (){
var i = 1,
    contentQuestion = $('<div class="new-question"></div>'),
    remove = $('<div class="deleteButton">Remove</div>').appendTo(contentQuestion),
    content = $('#content');
$('.addcontent').on('click', function () {
  content.append(contentQuestion.clone().append('<b>Question ' + i + '</b><br> This is div text'));
  i += 1;
});
content.on('click', '.deleteButton', function () {
  $(this.parentNode).remove();       
});
});

jsbin：
http://jsbin.com/gequveroba/1/edit?html,css,js,output

当删除div时，按钮停留在最后一个div中

4 个答案: