javascript - 隐藏 div 后允许在按钮单击时重新显示

Question

初始显示仅显示第一个 div。当您选择添加另一个时，下一个 div 也会显示。当您选择该 div 旁边的“删除”时，它将被隐藏/删除。

我遇到的问题是，如果用户选择“添加另一个”，如何让 div 重新显示。这样他们最多可以显示 4 个 div。目前，选择“删除”后，如果您选择“添加另一个”，则仅显示之前未显示和删除的 div。我希望用户始终可以选择添加所有 4 个 div，即使他们要添加一个然后将其删除，然后又想将其添加回来。

这是我当前的代码:

//Remove div when clicked  
$('#donation_element1_row').show();
$('.removeDiv').click( function() {
    $(this).closest('div[id*="donation_element"]').hide();
});
//Add another designation
var count = 0,
$allDivs = $('#donation_element2_row, #donation_element3_row, #donation_element4_row');
$('#addAnother').click( function() {
    if( count < $allDivs.length ) {
        $allDivs.eq( count ).fadeIn( 'slow' );
        count++;
    }
});

#addAnother {
    display: inline-block;
    width: 236px;
    height: 50px;
    line-height: 44px;
    text-align: center;
    border: 3px solid #f8a61b;
    color: #860005;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 20px;
    cursor: pointer;
    background-color: #f8a61b;
}

div[id*='donation_element'] {
    background-color: blue;
    color: #fff;
    display: none;
    margin: 10px;
    max-width: 200px;
}
.removeDiv {
    cursor: pointer;
    text-align: right;
    background-color: #333;
    text-align: center;
}
p {
    text-align: center;
    padding-top: 10px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="donation_element1_row">
    <p>Div 1</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="donation_element2_row">
    <p>Div 2</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="donation_element3_row">
    <p>Div 3</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="donation_element4_row">
    <p>Div 4</p>
    <div class="removeDiv">Remove X</div>
</div>
<div id="addAnother">+ Add Another</div>

Answer 1

您还可以使用以下代码。因此，当您删除 div 时，请将其附加到末尾。这将有助于您处理超过 4 个 div。

//Remove div when clicked  
$('#donation_element1_row').show();

$('.removeDiv').click( function() {
	$(this).parent().hide();
  $("#parent_donation_container").append($(this).parent());
});

$('#addAnother').click( function() {    
    $(".donation_element").not(":visible").first().fadeIn( 'slow' );
});

#addAnother {
    display: inline-block;
    width: 236px;
    height: 50px;
    line-height: 44px;
    text-align: center;
    border: 3px solid #f8a61b;
    color: #860005;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 20px;
    cursor: pointer;
    background-color: #f8a61b;
}

div[id*='donation_element'] {
  background-color: blue;
  color: #fff;
  display: none;

  margin: 10px;
  max-width: 200px;
  }
  
  .removeDiv {
    cursor: pointer;
    text-align: right;
    background-color: #333;
    text-align: center;
    }
p {
  text-align: center;
  padding-top: 10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="parent_donation_container">
    <div id="donation_element1_row" class="donation_element"><p>
    Div 1</p><div class="removeDiv">Remove X</div></div>
    <div id="donation_element2_row" class="donation_element"><p>
    Div 2</p><div class="removeDiv">Remove X</div></div>
    <div id="donation_element3_row" class="donation_element"><p>
    Div 3</p><div class="removeDiv">Remove X</div></div>
    <div id="donation_element4_row" class="donation_element"><p>
    Div 4</p><div class="removeDiv">Remove X</div></div>
</div>

<div id="addAnother">+ Add Another</div>

https://jsfiddle.net/fye8qjk1/11/