javascript - 切换类似按钮来创建和删除输入框

Question

正在创建一个 HTML 页面，其中包含一些按钮来创建输入框。这些按钮的行为应该类似于切换按钮。即，第一次单击时应出现输入框，如果再次单击同一按钮，则该特定输入框需要消失。按钮切换我已经成功了。但 div 没有创建这是我的切换按钮

<button class="btn" id="button_rd" onclick="setColor('button_rd', '#101010')";>one</button>

以下是 JavaScript

var count = 1;
    function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
             property.style.backgroundColor = "#f4543c"//red
             property.style.borderColor = "#f4543c"
            count = 1;
        }
        else {
            property.style.backgroundColor = "#00a65a"//green
            property.style.borderColor = "#008d4c"
            count = 0;

            var newdiv = '<div class="form-group"><label for="exampleInputEmail1">email</label>'
            +'<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div>'
            document.getElementById("create").append(newdiv);
        }
    }

下面是我需要显示输入框的地方(在这个div内)

<div class="box-body" id="create">
</div>

Answer 1

如果您乐意使用 Jquery，Something like this可能就是您正在寻找的。

与其说是“创建”元素，不如说是“切换”其可见性

$(document).ready(function() {
  $('[id^=bool]').click(function() {
    var id = $(this).attr("id").substr($(this).attr("id").length - 1);
    $('[id^=bool' + id + '] .switcher').toggleClass("switched");
    var x = $('[id=input' + id + ']').length;
    if (x > 0) //there is one there
    {
      $('[id=input' + id + ']').remove();
    } else {
      $('body').append('<input type="text" id="input' + id + '" placeholder="input ' + id + '" />');
    }

  });
});

.bool {
  height: 40px;
  width: 100px;
  background: darkgray;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 5px 0 6px gray;
  border: 1px solid black;
}
.bool:before {
  content: "On";
  left: 10%;
  position: absolute;
  top: 25%;
}
.bool:after {
  content: "Off";
  right: 10%;
  position: absolute;
  top: 25%;
}
.switcher {
  height: 100%;
  width: 50%;
  position: absolute;
  background: lightgray;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translateX(0px);
  transition: all 0.5s;
  border-radius: 5px;
  box-shadow: inset 0 0 6px black;
}
.switched {
  transform: translateX(50px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bool" id="bool1">
  <div class="switcher"></div>
</div>
<div class="bool" id="bool2">
  <div class="switcher"></div>
</div>

编辑历史记录

• 根据评论修改了代码片段以包含 2 个切换
• 在 Tambo 的帮助下重构了 jquery 方法
• 将标记更改为“追加”和“删除”