Javascript 删除div时，按钮将保留在最后一个div中_Javascript_Jquery_Html_Css

Javascript 删除div时，按钮将保留在最后一个div中

javascript jquery html css

Javascript 删除div时，按钮将保留在最后一个div中,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试修复我的jQuery代码。我只想要最后一个div中的“添加内容”按钮。如果删除了一个分区，按钮将保留在最后一个分区中。请提供建议 var i = 1; var deletedDivs = 0; var createdDivs = 0; $(document).ready(function () { $(document).on('click', '.addcontent', function () { if (i == 1) $(".question").htm

我正在尝试修复我的jQuery代码。我只想要最后一个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中移出：

HTML:

JS:

jsiddle:

试试这个：

将按钮从div中移出：

HTML:

JS:

jshiddle:

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

div button { display: none; }

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

很难看出您的想法，但我会在所有div中使用按钮，并使用CSS显示或隐藏按钮

div button { display: none; }

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

以下是更新/工作代码

HTML:

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

以下是更新/工作代码

HTML:

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

如果在最后使用CSS重叠该属性，那么效率会更高，并且在需要添加和删除该元素时，可以保留相同的元素 html:

js:

jsbin：

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

js:

jsbin：

为什么在同一html id中重复id=问题“+i+”为什么在同一html id中重复id=问题“+i+”

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

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

<!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>

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

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