Technical
公開日: 2024年08月15日
公開日: 2024年08月15日
【JavaScript/jQuery】クリックでHTML要素を追加・削除する方法
「フォームの項目追加+」みたいなのを作りたく、JavaScriptのjQueryを使ってクリックすると入力欄が増えていくという動きの実装を行いました。
デモサイト
html
まずはjqueryとか呪文を読み込みます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js"></script>コンテンツのhtmlはこんな具合(classやcssはご自由にどうぞ)
<div class="ip-fields-container">
<!--追加されるコンテンツ-->
<div class="row">
<form action="" method="" name="" id="">
<div class="request_wrap02"><input type="text"></div>
<div class="request_btn_area">
<button id="add-field-btn" type="button" class="request_input_field_on">入力フィールドを追加する</button>
<button class="request_submit">確認画面へ</button>
</div>
</form>
</div>
<!--追加されるコンテンツ-->
</div>js
細かいことは省きますがこれで完成します。
<!-- 入力フィールドを増やすJS -->
<script>
var fieldCount = 1;
$(document).on('click', '#add-field-btn', function() {
fieldCount++;
var newField = $(
'<div class="row">' +
'<form action="" method="" name="' + fieldCount + '" id="' + fieldCount + '">' +
'<div class="request_wrap02"><input type="text"></div>' +
'<div class="request_btn_area">' +
' <div>' +
' <button id="add-field-btn" type="button" class="request_input_field_on">入力フィールドを追加する</button>' +
' <button type="button" class="remove-field-btn request_input_field_off">入力フィールドを削除する</button>' +
' </div>' +
' <button class="request_submit">確認画面へ</button>' +
'</div>' +
'</form>' +
'</div>'
);
$('.ip-fields-container').append(newField);
});
$(document).on('click', '.remove-field-btn', function() {
$(this).closest('.row').remove();
});
</script>