Jqueryを使用して1つのdivをリセットする方法

Question

ドロップダウン値3または4に基づいて、divの表示と非表示を切り替えます。本部の内容を示した後、それは私が段落に選択ボタンをドラッグ＆ドロップします。この

のようになります。そのため私は下のフィドルからコードを使用しています。

http://jsfiddle.net/ChaseMoskal/T2zHQ/ 

問題は、ドロップダウンの表示ボタンが表示されることです。その後、私はchoice1を落としたらドラッグ＆ドロップできます。 私が同じ選択肢に戻ると、私はChoice1を元に戻すことができません。だから私は選択divを再度リセットする必要があります。 .html(),で試してみましたが、特定のdivを読み込んでいますが動作しません。

マイHMTL：あなたは、負荷の変動に親のdivのHTMLを保存することができ、あなたはdiv要素をリセットしたいしながら、あなただけのdivに変数からHTMLコンテンツを読み込むことができ

<div class="choice col-md-10 col-md-offset-2"> 
    <div class="choices_butt3 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    </div> 
    <div class="choices_butt4 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    <span class="fancy nonEditable">Choice4</span> 
    </div> 
     <div class="choices_butt5 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    <span class="fancy nonEditable">Choice4</span> 
    <span class="fancy nonEditable">Choice5</span> 
    </div> 
     <div class="choices_butt6 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    <span class="fancy nonEditable">Choice4</span> 
    <span class="fancy nonEditable">Choice5</span> 
    <span class="fancy nonEditable">Choice6</span> 
    </div> 
    <div class="choices_butt7 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    <span class="fancy nonEditable">Choice4</span> 
    <span class="fancy nonEditable">Choice5</span> 
    <span class="fancy nonEditable">Choice6</span> 
    <span class="fancy nonEditable">Choice7</span> 
    </div> 
    <div class="choices_butt8 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    <span class="fancy nonEditable">Choice4</span> 
    <span class="fancy nonEditable">Choice5</span> 
    <span class="fancy nonEditable">Choice6</span> 
    <span class="fancy nonEditable">Choice7</span> 
    <span class="fancy nonEditable">Choice8</span> 
    </div> 
    <div class="choices_butt9 box"> 
    <span class="fancy nonEditable">Choice1</span> 
    <span class="fancy nonEditable">Choice2</span> 
    <span class="fancy nonEditable">Choice3</span> 
    <span class="fancy nonEditable">Choice4</span> 
    <span class="fancy nonEditable">Choice5</span> 
    <span class="fancy nonEditable">Choice6</span> 
    <span class="fancy nonEditable">Choice7</span> 
    <span class="fancy nonEditable">Choice8</span> 
    <span class="fancy nonEditable">Choice9</span> 
    </div> 
    </div> 

Answer 1

。

親コンテナid="choice_div"

<div class="choice col-md-10 col-md-offset-2" id="choice_div"> 

は、以下のように変数を宣言し、リセットresetChoicediv()機能ドロップダウンののonChangeを呼び出すためのIDを与えます。

var choice_div_html; 
function resetChoicediv(){ 
    $('#choice_div').html(window.choice_div_html); 
} 

$(function(){ 
    window.choice_div_html = $('#choice_div').html(); 
}) 

.box { 
 
    display:block; 
 
    border:1px solid red; 
 
    margin:5px; 
 
} 
 
.box span { 
 
    display:block; 
 
    padding:5px; 
 
    border:1px dashed blue; 
 
    margin:2px; 
 
} 
 
.removeBtn { 
 
    color:red; 
 
    float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button type="button" onclick="resetChoicediv();">Reset DIV</button> 
 
    <button type="button" onclick="addremovebuttons();">Add remove buttons</button> 
 

 
</div> 
 

 
<div class="choice col-md-10 col-md-offset-2" id="choice_div"> 
 
    <div class="choices_butt3 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
    </div> 
 
    <div class="choices_butt4 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
     <span class="fancy nonEditable">Choice4</span> 
 
    </div> 
 
    <div class="choices_butt5 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
     <span class="fancy nonEditable">Choice4</span> 
 
     <span class="fancy nonEditable">Choice5</span> 
 
    </div> 
 
    <div class="choices_butt6 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
     <span class="fancy nonEditable">Choice4</span> 
 
     <span class="fancy nonEditable">Choice5</span> 
 
     <span class="fancy nonEditable">Choice6</span> 
 
    </div> 
 
    <div class="choices_butt7 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
     <span class="fancy nonEditable">Choice4</span> 
 
     <span class="fancy nonEditable">Choice5</span> 
 
     <span class="fancy nonEditable">Choice6</span> 
 
     <span class="fancy nonEditable">Choice7</span> 
 
    </div> 
 
    <div class="choices_butt8 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
     <span class="fancy nonEditable">Choice4</span> 
 
     <span class="fancy nonEditable">Choice5</span> 
 
     <span class="fancy nonEditable">Choice6</span> 
 
     <span class="fancy nonEditable">Choice7</span> 
 
     <span class="fancy nonEditable">Choice8</span> 
 
    </div> 
 
    <div class="choices_butt9 box"> 
 
     <span class="fancy nonEditable">Choice1</span> 
 
     <span class="fancy nonEditable">Choice2</span> 
 
     <span class="fancy nonEditable">Choice3</span> 
 
     <span class="fancy nonEditable">Choice4</span> 
 
     <span class="fancy nonEditable">Choice5</span> 
 
     <span class="fancy nonEditable">Choice6</span> 
 
     <span class="fancy nonEditable">Choice7</span> 
 
     <span class="fancy nonEditable">Choice8</span> 
 
     <span class="fancy nonEditable">Choice9</span> 
 
    </div> 
 
</div> 
 

 
<script> 
 
    var choice_div_html; 
 

 
    function resetChoicediv() { 
 
     $('#choice_div').html(window.choice_div_html); 
 
    } 
 

 
    $(function() { 
 
     window.choice_div_html = $('#choice_div').html(); 
 

 
     //adding remove buttons for each choice for testing... 
 
     addremovebuttons(); 
 

 
    }) 
 

 
    //test - add remove btn 
 
    function addremovebuttons() { 
 
     $('#choice_div').find('span').each(function() { 
 
      if ($(this).find('.removeBtn').length == 0) { 
 
       $(this).append('<button onclick="$(this).parent().remove(); "class="removeBtn" >x</button>'); 
 
      } 
 
     }); 
 

 
    } 
 
</script>