フォームのinputを増やしたり減らしたりするボタンを追加するJavascript(jquery)

@_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;
}