如何追加和删除具有默认元素

Question

我有一个切换复选框（请参阅代码段）。检查时，您可以输入您的姓名，它将显示在下方。取消选中它以删除所有。

有一个默认文字：“你没有名字”。

取消选中该框后，我需要再次添加默认文本。怎么样？

聚苯乙烯。我不想隐藏/显示

             $(function(){
            let NewContent='<div class="added"><p><label>What is your name? </label><input type="text" id="A">                </div></p><p>Your name is: <span class="Y"></span></p>'
            let added = false;
            let $content;
            $(".addremove").on('click', function(){
             /* HERE I REMOVE THE DEFAULT TEXT */
            $(".default").remove();
              /* HOW TO GET IT APPENDED BACK WHEN UNCHECKING THE BOX? */
            if (!added) {
            $content =  $(NewContent).appendTo('.firstappend');
              var name1 = document.getElementById('A');
              name1.addEventListener('input', function() {
               var result = document.querySelector('span.Y');
                console.log(this.value );
                result.innerHTML = this.value;
              });
            }
            else $content.remove();
            $(".default").appendTo(".X");
            added = !added;
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  <input type="checkbox" class="addremove">Do you have a name?</input>
</div>

<div class="X"></div>
<div class="default"><p>You don't have a name</p></div>

<div class="firstappend"></div>

Answer 1

保留对默认值的引用，然后使用引用附加到.X：

＆＃13;

＆＃13;

             $(function(){
            let NewContent='<div class="added"><p><label>What is your name? </label><input type="text" id="A">                </div></p><p>Your name is: <span class="Y"></span></p>'
            let added = false;
            let $content;
            let $default = $('.default');
            $(".addremove").on('click', function(){
             /* HERE I REMOVE THE DEFAULT TEXT */
            $default.remove();
              /* HOW TO GET IT APPENDED BACK WHEN UNCHECKING THE BOX? */
            if (!added) {
            $content =  $(NewContent).appendTo('.firstappend');
              var name1 = document.getElementById('A');
              name1.addEventListener('input', function() {
               var result = document.querySelector('span.Y');
                console.log(this.value );
                result.innerHTML = this.value;
              });
            }
            else {
                $content.remove();
                $default.appendTo(".X");
            }
            added = !added;
          });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
  <input type="checkbox" class="addremove">Do you have a name?</input>
</div>

<div class="X"></div>
<div class="default"><p>You don't have a name</p></div>

<div class="firstappend"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

取消选中复选框时添加条件。取消选中该复选框时，请检查其他条件。

                 $(function(){
                let NewContent='<div class="added"><p><label>What is your name? </label><input type="text" id="A">                </div></p><p>Your name is: <span class="Y"></span></p>'
                let added = false;
                let $content;
                $(".addremove").on('click', function(){
                 if(this.checked){
                 /* HERE I REMOVE THE DEFAULT TEXT */
                $(".default").empty();
                  /* HOW TO GET IT APPENDED BACK WHEN UNCHECKING THE BOX? */
                if (!added) {
                $content =  $(NewContent).appendTo('.firstappend');
                  var name1 = document.getElementById('A');
                  name1.addEventListener('input', function() {
                   var result = document.querySelector('span.Y');
                    console.log(this.value );
                    result.innerHTML = this.value;
                  });
                }
                else $content.remove();
                $(".default").appendTo(".X");
                added = !added;
} else {
$(".default").html("<p>You don't have a name</p>");
$(".firstappend").empty();
}
              });
            });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="toadd">
      <input type="checkbox" class="addremove">Do you have a name?</input>
    </div>

    <div class="X"></div>
    <div class="default"><p>You don't have a name</p></div>

    <div class="firstappend"></div>