@_yonecoです。フォームのコーディングをしていた際に、inputの項目をユーザーが増やしたり減らしたりできるようにしたいと思い、javascriptでできないかと調べていたときのメモです。
やってみたデモ
「＋」のボタンを押すと入力欄が追加されていき、「−」のボタンを押すと入力欄が削除されます。
ソースコード
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".add", function() {
$(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
var target = $(this).parent();
if (target.parent().children().length > 1) {
target.remove();
}
});
</script>
HTML
<div id="input_pluralBox">
<div id="input_plural">
<input type="text" class="form-control" placeholder="サンプルテキストサンプルテキストサンプルテキスト">
<input type="button" value="＋" class="add pluralBtn">
<input type="button" value="－" class="del pluralBtn">
</div>
</div>
CSS
#input_plural {
margin: 10px 0;
}
#input_plural input.form-control {
display: inline-block;
width: 75%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: #555;
}
#input_plural input.pluralBtn {
width: 30px;
height: 30px;
border: 1px solid #ccc;
background: #fff;
border-radius: 5px;
padding: 0;
margin: 0;
}
コメント
はじめまして。
フォームに文字を入力したまま増やすとその文字ごとコピーされてしまうのですが、空欄のフォームのみ増やす方法を教えていただけないでしょうか？
こちらお返事遅れました！たしかに紹介しているやり方だとフォームに文字を入力したあとに増やすと、文字ごと複製されてしまいますね…！
このやり方とは違うのですが、jQueryプラグインのSheepIt！でしたら、文字が入力されていても空欄のフォームを増やすことが可能ですので、
よかったら以下よりダウンロードして試してみてくださいませ！
https://github.com/mdelrosso/sheepit