javascript - 複数または単一の行を削除する方法

Question

私は父と息子の関係を持つテーブルを持っています。父親を削除すると、その下の息子も削除されます。個々の息子を削除することもできます。これまでのコードは、対応する ID を持つ父または息子を削除せず、テーブルの最初のものを削除します。 これが私のコードです：

<script>
function delVesselAll(num){
    $("#vessel_tab #father" + num).remove();
    $("#vessel_tab .son" + num).remove();
    document.getElementById(id).style.display = 'block';
};
function delSon(num){
    $("#vessel_tab #son" + num).remove();
    document.getElementById(id).style.display = 'block';
};
</script>

そして私のHTML：

<table id="vessel_tab">
  <tr id="father1">
    <td colspan="2" class="father_header">Father 1</td>
    <td><a style="text-decoration:none;" onclick="showModal('delAllModal')"><input type="button" value="delete" onclick="showModal('delAllModal')"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none" id="delAllModal">
Are you sure you want to delete the father and corresponding sons?<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delAllModal')"/><input type="button" value="Delete" onclick="delVesselAll(1)" id="delete"/></div>
  </tr>
  <tr class="son1" id="son1">
    <td>&nbsp;</td>
    <td>Son 1</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(1)"/></div>
  </tr>
  <tr class="son2" id="son2">
    <td>&nbsp;</td>
    <td>Son 2</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(2)"/></div>
  </tr>
  <tr id="father2">
    <td colspan="2">Father 2</td>
    <td><a style="text-decoration:none;" onclick="showModal('delAllModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none" id="delAllModal">
Are you sure you want to delete the father and corresponding sons?<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delAllModal')"/><input type="button" value="Delete" onclick="delVesselAll(2)" id="delete"/></div>
  </tr>
 <tr class="son3" id="son3">
    <td>&nbsp;</td>
    <td>Son 3</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(3)"/></div>
  </tr>
  <tr class="son4" id="son4">
    <td>&nbsp;</td>
    <td>Son 4</td>
    <td><a style="text-decoration:none;" onclick="showModal('delSonModal')"><input type="button" value="delete"></a></td>
      <div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none" id="delSonModal">
Please confirm deletion.<br /><input type="button" value="Cancel" class="hide" onclick="hideModal('delSonModal')"/><input type="button" value="Delete" onclick="delSon(4)"/></div>
  </tr>
</table>

また、jsfiddle。正しく動作していません (何が間違っていたのかわかりません) が、私のコードはそこにあります。前もって感謝します！ http://jsfiddle.net/7tFFS/1/

score 1 · Accepted Answer

私は物事をクリーンアップし、コードをリファクタリングしました。これがJSFiddleです。

HTML：

<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:10px; display:none"
id="delAllModal">Are you sure you want to delete the father and corresponding sons?
    <br
    />
    <input type="button" value="Cancel" class="hide" />
    <input type="button" value="Delete" class="delete" />
</div>
<div class="delModal" style="z-index:999999; margin-left:200px; margin-top:30px; display:none"
id="delSonModal">Please confirm deletion.
    <br />
    <input type="button" value="Cancel" class="hide" />
    <input type="button" value="Delete" class="delete" />
</div>
<table id="vessel_tab">
    <tr id="father1">
        <td colspan="2" class="father_header">Father 1</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son1" id="son1" data-father="father1">
        <td>&nbsp;</td>
        <td>Son 1</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son2" id="son2" data-father="father1">
        <td>&nbsp;</td>
        <td>Son 2</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr id="father2">
        <td colspan="2">Father 2</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son3" id="son3" data-father="father2">
        <td>&nbsp;</td>
        <td>Son 3</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
    <tr class="son4" id="son4" data-father="father2">
        <td>&nbsp;</td>
        <td>Son 4</td>
        <td>
            <input type="button" value="delete" class="delete" />
        </td>
    </tr>
</table>

JS：

function showModal(id, child) {
    var $modal = $(child ? "#delSonModal" : "#delAllModal");
    $modal.fadeIn("slow")
        .find(".delete")
        .one("click", function () {
            $("#" + id + ", [data-father=" + id + "]").fadeOut("slow");
            $modal.fadeOut("slow");
        });
}


$("input.hide").click(function () {
    $(this).closest("div.delModal").fadeOut("slow");
});

$("#vessel_tab input.delete").bind("click", function () {
    var $tr = $(this).closest("tr");
    showModal($tr.attr("id"), !!$tr.data("father"));
});

編集：

HTML内のonClickハンドラーを使用しているため、Fiddleが機能していませんでした。それは必ずしも間違っているわけではありませんが、JSFiddleはそれを気に入らなかったようです。全体を通して、それらをjQueryハンドラーに置き換えました。

HTMLでは、ダイアログを繰り返す必要がなかったので、それらを取り出してテーブルの外に置きました。不要なアンカータグもいくつかありましたが、削除しました。また、入力タグの最後にスラッシュを追加しました...本当に必要なものはすべてありませんが、XHTMLにはそれが必要であり、Fiddleを狂わせたのでそれだけです。一部の場所（キャンセル/削除ボタンなど）ではIDの代わりにクラスを使用して、jQueryでグループとしてそれらを参照する簡単な方法を提供しました。（物を投げずにIDタグを複製することはできません。）data-fatherすべての息子のタグは、後でshowModal表示するダイアログ（delAllModalまたはdelSonModal）を決定するために使用され、さらに重要なことに、息子を父親にリンクして許可するために使用されます。ユニット全体としてのそれらの削除。

JSでは：

関数を呼び出す代わりにインラインで実行するために書き直したコードの多く。例外はshowModal。
$("input.hide").click...ダイアログの両方の[キャンセル]ボタンを接続します。
$("#vessel_tab input.delete")...テーブル内のすべての削除ボタンを配線します。基本的には単なるラッパーですshowModal...
...それは私たちを肉に連れて行きます。showModal：
- このvar $modal...行は、クリックされたボタンが子供用であるかどうかに基づいて、表示するダイアログを選択します。
- ダイアログが表示され、その削除ボタンが配線されています。oneここでは、ではなく使用していることに注意してくださいon。これにより、ボタンのクリックハンドラーが作成されますが、使用後すぐに破棄してください。onおそらくうまく機能したでしょうが、これはあまり混乱を残しません。
- クリックハンドラーはfadeOut、渡されたIDと、そのIDをdata-father属性として持つ要素（事実上、IDの子）の両方を呼び出します。父にとって、これは父と息子を隠します。data-fatherSonsの場合、SonのIDに一致する属性を持つ要素がないため、Sonを非表示にするだけです。
- 最後に、ダイアログを閉じます。

これがすべてかなり明確であることを願っています。ハッピーハッキング！

score 0 · Accepted Answer

htmlの構造を少し変更します。

なぜあなたは父親の要素の下に含まれるように息子を追加しないのですか？例えば：

<tr id="father_1">
  <td class="father_1">Father 1</td>
  <td class="son_of_f1" id="son_1">Son 1</td>
  <td class="son_of_f1" id="son_2">Son 2</td>
  <td class="son_of_f1" id="son_3">Son 3</td>
  <td class="son_of_f1" id="son_4">Son 4</td>
</tr>

次に、JQueryでフォローできます

 $('#father_1').fadeOut(500);
 $('.son_of_f1').fadeOut(500);`

_1動的にして変数に保存することができます

注：2人の息子に同じIDを持たせることはできないため、各息子にIDSではなくクラスを使用する方が適切です。

javascript - 複数または単一の行を削除する方法

2 に答える 2

Related

Reference