JavaScriptにて、複数削除と自動計算がしたい。

Question

前提・実現したいこと

１．JavaScriptにて追加された行に対し、同要素をもつ４行の内、何れかの入力欄に数値が入力された後にその行と同一の行の対象の項目に計算結果を反映したい。
＊cloneされ行が４行の状態のものを本投稿では記載しております。追加ボタンの動作は本影響外となります。また、動作経緯の為sampleには追加の明記もあります。

２．行削除を行削除ボタンが押された1行のみでなくボタンが押された1行と隣接している行も含め2行削除したい。
※該当ソース箇所(ueとshita)
sampleは以下になります。
https://codepen.io/sougoukanri/pen/GRvGvqW

前提:元画面は2行のみ表示された画面であり、本質問にあたり動作状問題となる画面はclone後の4行になった際の事象になります為本投稿は意図的に4行の状態にしております。

発生している問題・エラーメッセージ

１．cloneして、行を追加している為、自動計算に関しては、正しく反映されない。
1行目は反映される。
問題：行追加後、3行目にて同様の要素箇所では数値を入力してもその行には反映されない。

２．parents('tr').removeであるため、対象1行のみでしか削除されない。

該当のソースコード

  <tbody id="p2146-2-tbody" class="p2146-2-tbody" name="p2146-2-tbody">
    <tr id="ue">
      <td><input id="anohi" name="anohimita" value="">
      </td>
      <td>
        <select class="changeList">
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
      </td>
      <td id="darenogare">A</td>
      <td>
        <button class="upList">⬆️上へ</button>　
        <button class="downList">⬇️下へ</button>
      </td>
      <td>
      </td>
    </tr>
    <tr id="shita">
      <td><input>
      </td>
      <td>
        <select class="changeList">
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
      </td>
      <td>A</td>
      <td>
        <button class="upList">⬆️上へ</button>　
        <button class="downList">⬇️下へ</button>
      </td>
      <td>
        <button id="hogedelete" type="button" class="hohodelete">行削除</button>
      </td>
    </tr>
    <tr id="ue">
      <td><input id="anohi" name="anohimita" value="">
      </td>
      <td>
        <select class="changeList">
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
      </td>
      <td id="darenogare">A</td>
      <td>
        <button class="upList">⬆️上へ</button>　
        <button class="downList">⬇️下へ</button>
      </td>
      <td>
      </td>

長い為2つに分けます。

      <td>
      </td>
    </tr>
    <tr id="shita">
      <td><input>
      </td>
      <td>
        <select class="changeList">
          <option>A</option>
          <option>B</option>
          <option>C</option>
        </select>
      </td>
      <td>A</td>
      <td>
        <button class="upList">⬆️上へ</button>　
        <button class="downList">⬇️下へ</button>
      </td>
      <td>
        <button id="hogedelete" type="button" class="hohodelete">行削除</button>
      </td>
    </tr>

//追加
$("#add").on("click", function () {
  $("#p2146-2-table　> tbody > tr ").clone(true).appendTo($("#p2146-2-tbody"));
});

//削除
$(document).on("click", ".hohodelete", function () {
  $(this).parents("tr").remove();
});

$(function () {
  var value = 200;
  var tagInputh = $("#anohi"); // 入力対象のinputタグID名
  var tagOutput = $("#darenogare"); // 出力対象のinputタグID名
  tagInputh.on("change", function () {
    var str = $(this).val();
    var num = Number(str.replace(/[^0-9]/g, "")); // 整数以外の文字列を削除
    $(this).val(num);
    if (num != 0) {
      //計算のみ
      var price = num * value;
      tagOutput.val(price);
      $("#darenogare").text(price);
    }
  });
});

試したこと

grop化、clone時のid振り分け

補足情報（FW/ツールのバージョンなど）

HTML5
CSS3
JavaScript
jQuery

Comments

[ku__ra__ge]

質問文の内容から考えると、質問者さんはボタンを押すとなんらかの動作をすると想定しているようですが、提示されたコードをブラウザで表示させてボタンを押しても何も起きません。
質問に記載した問題が再現するコードを提示してください。

[Lorraine]

ご指摘どうも有難うございます。
ブラウザ上で動作し、問題箇所の事象が見れるものへと修正いたしました。

[yambejp]

自動計算の根拠もよくわからないので
もっと簡単な例に絞ったほうがよいでしょう

[Lhankor_Mhy]

「押された1行と隣接している行も含め2行削除」とのことですが、隣接行は上下あるはずなので「3行」の間違いだと読みましたが、よろしいですか？

[Lorraine]

失礼しました、曖昧表現でした、隣接行すべてが対象ではなく、あくまでtr行のue，shitaの2行を1セットとして削除したい意になります。

[Lhankor_Mhy]

「同要素を持つ」とはなんですか？　一般的にDOMはツリー構造なので、ある同じ要素を複数の要素が持つことはないです。おそらく、同じ値とかそういう意味だと思いますが、そうだとした場合、どの値を比べたいのでしょうか。

[Lhankor_Mhy]

「対象の項目」とは具体的には何ですか？ #darenogare ですか？

Answer 1

自分の行と上の行をまとめて削除するだけなら

$(document).on("click", ".hohodelete", function () {
  $(this).parents("tr").prev().remove();
  $(this).parents("tr").remove();
});

Comments

[Lorraine]

.prev()で直前の要素を取得して削除すればよかったのですね、ありがとうございます。削除問題に関して解決しました。

[yambejp]

自動計算は計算根拠を明示ください

[Lorraine]

読み飛んでおりました、自動計算のフォーカスのみでの計算根拠はありません、単純に同行列内で入力欄anohiに入力された値に対し、darenogareに計算された値が即時出力されれば理想だと考えております。

Answer 2

find()での親要素から子要素を取得して、計算することで対応できました。

Answer 3

#anohi #darenogare を単純にクローンしているので、同じIDが複数存在しています。
ID属性は一意なので、想定しているような動作をしない可能性が高いです。

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。

id - HTML: HyperText Markup Language | MDN

解決方法ですが、複数存在することが想定される要素は、クラスで識別する方がいいかと思います。

Comments

[Lorraine]

回答どうも有難うございます。クラスの識別の方取り入れこちらで検討してみます。