Django+Jqueryで追加ボタンで追加した行を削除するボタンを実装したい

Question

構成管理のためにサーバの情報を取得して
DBなどに登録するUIを作っているのですが
jqueryで、disk2, 3, 4, ...
のように数値を遷移させる方法がわからず困っています、、、
djangoのコードの一環のため以下のドキュメントを参照させていただいています。
※内容はjqueryに起因するものという認識なので上記タグで投稿しました

https://narito.ninja/blog/detail/36/

特に <script>内の
var totalManageElement = $('#id_tr_disk-TOTAL_FORMS');
この部分で操作時点で画面上で操作されている

<tr><input> で囲まれた行数を取得して その次の行にIDを振ろうとしているのですが （さらに、そのIDに従って行を削除するボタンを作るのが最終目的ですが） これがうまく取得できなくて困っています。。。。

どなたかご教授いただければ幸いですｍｍ

# cat svradm_design/inspec_ui/forms.py
from django import forms
from .models import Server, Disk

class InspecForm(forms.Form):
  class Meta:
    mode = Server
    fields = '__all__'

DiskFormSet = forms.inlineformset_factory(
  Server, Disk, fields='__all__', extra=1, can_delete=True
)

{% extends "inspec_ui/base.html" %}

{% block content %}

<h1>inspec_ui</h1>
<form action="" method="get">
{% csrf_token %}
  <table>
    <tr><td>ServerName</td><td><input type="test" size="20" name="servername"></td></tr>
    <tr><td>CPU-Memory</td><td><input type="test" size="20" name="cpumemory"></td>
    <tbody id='disk'>
      <tr><td>Disk</td><td>partition_name</td><td>size</td><td>filesystem</td></tr>
      <tr id="disk1">
        <td></td>
        <td><input type="test" size="20" name="disk_partition_name"></td>
        <td><input type="test" size="20" name="disk_size"></td>
        <td><input type="test" size="20" name="disk_filesystem"></td>
        <td><button id="add_disk" type="button" class="btn btn-primary">+</button></td>
      </tr>
    </tbody>
    <tr><td colspan='2'><input type="submit" value="Submit"></td></tr>
  </table>
  servername : {{ servername }}<br>
{% endif %}
{% if cpumemory %}
  cpumemory : {{ cpumemory }}<br>
{% endif %}
{% if disk_partition_name %}
  disk_partition_name : {{ disk_partition_name }}
, disk_size : {{ disk_size }}
, disk_filesystem : {{ disk_filesystem }}
{% endif %}

{% endblock %}

{% block extrajs %}
<script>
//var currentDiskCount
$(function(){
    var totalManageElement = $('#id_tr_disk-TOTAL_FORMS');
    var currentDiskCount = parseInt(totalManageElement.val());
    console.log(`hoge: ${currentDiskCount}`);
    currentDiskCount += 1;
    var disk_id = `disk${currentDiskCount}`
    $('button#add_disk').on('click', function(){
        var disk_partition_nameElement = $('<input>', {
            id: 'id_disk_partition_nameElement-' + currentDiskCount + '-name',
            type: 'disk_patrition_name',
            name: 'disk_set-' + currentDiskCount + '-name',
        });
        var disk_sizeElement = $('<input>', {
            id: 'id_disk_set-' + currentDiskCount + '-src',
            type: 'disk_size',
            name: 'disk_set-' + currentDiskCount + '-src',
        });
        var disk_filesystemElement = $('<input>', {
            id: 'id_disk_set-' + currentDiskCount + '-src',
            type: 'disk_filesystem',
            name: 'disk_set-' + currentDiskCount + '-src',
        });
        var disk_partion_name = jQuery('<div>').append(disk_partition_nameElement.clone(true)).html();
        var disk_size = jQuery('<div>').append(disk_sizeElement.clone(true)).html();
        var disk_filesystem = jQuery('<div>').append(disk_filesystemElement.clone(true)).html();
        var disk_delete = `<button id=\'delete_${disk_id}\'>-</button>`
        var addline = `<tr id=${disk_id}><td></td><td>${disk_partion_name}</td><td>${disk_size}</td><td>${disk_filesystem}</td><td>${disk_delete}</td></tr>`
        console.log(disk_partion_name);
        $('tbody#disk').append(addline)
        totalManageElement.attr('value', currentDiskCount);
        console.log('disk_id:' + currentDiskCount)
    });
    //var currentDiskCount = 1;
    $(`button#delete_${disk_id}`).on('click', function(){
       $('<tr id=\'disk${disk_id}\'>').remove();
       //$(this).remove();
    });
});
</script>

Comments

[Lhankor_Mhy]

テンプレート部分に、#id_tr_disk-TOTAL_FORMS が存在しないようですが、これはご提示いただいているコードの外にあるものでしょうか？
そして、その要素には現在の行数が納められている、という理解で合っていますか？

[07290729]

先に、要旨に近いご指摘をいただいていたのですが
より直接的にご指摘をいただいたgh640さんのコメントをベストアンサーとさせていただきました。
申し訳ありません。
ご指摘ありがとうございました。

Answer 1

対応する form クラス等がどのようになっているのかわからないため全容はわかりませんが、 xxx-TOTAL_FORMS というのは Django の formset の機能であるということは理解された上で使われていますか？

• Understanding the ManagementForm | Formsets | Django documentation | Django

formset は使ってなくて自前で input 要素を書かれているのであれば ID xxx-TOTAL_FORMS の要素は存在しないのではないかと思いますが、いかがでしょう。

追記 1

コメントでいただいたリクエストにお応えします。

すみません、補足させていただきました。
リストに追加したものをfomrs.pyとして使用しています。
ただ、こちらが機能していないようで（もしくはTOTAL_FORMSの書き方に問題がありそうですが）
うまく値がとれてないようなのです・・・。

formset の management_form は描画されていますか？手探りであれこれ試されるのでもよいですが、おそらく、一度公式のドキュメントにも目を通して、 formset の TOTAL_FORMS がどのように使えるものなのかを正確に理解した上で取り組まれる方が、近道ではないかと思います。

該当する部分はこのあたり ↓ です。

• Understanding the ManagementForm | Formsets | Django documentation | Django

Stack Overflow の次のページ ↓ の回答等もとてもわかりやすいです。

• Dynamically adding a form to a Django formset with Ajax - Stack Overflow

Comments

[07290729]

ご指摘のとおり
”formset は使ってなくて自前で input 要素を書かれているのであれば”
で、まだこちらは勉強中でした・・。

こちら学習して再度コード見直してみます。ご指摘ありがとうございます。

補足）
一応 forms.pyにはFormsetを追加しているのですが
（現在使用しているforms.pyを追記しました
こちらが機能していないようです・・・
（おそらく書き方がおかしいのだと思いますが・・・

[gh640]

そうでしたか。ご丁寧にコメントいただきありがとうございます。

[07290729]

すみません、補足させていただきました。
リストに追加したものをfomrs.pyとして使用しています。
ただ、こちらが機能していないようで（もしくはTOTAL_FORMSの書き方に問題がありそうですが）
うまく値がとれてないようなのです・・・。
（Jquery中のcurrentDiskCount が”NaN”になってしまっています）