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

javascript

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

参考にさせていただいたサイト

こちらの記事を参考にカスタマイズしました。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
yoneco

@_yonecoです。都内で働くWebデザイナー&ディレクターです。暇な時はサイトを更新したり動画を撮ったり落書きしたりイベントに出かけたりしています。お気軽にお声掛けくださいな

yonecoをフォローする
javascriptメモ
この記事を共有(シェア)する
ウェブ屋の日常

コメント