jQueryによって追加された隠し入力を削除する方法

Question

selectから追加された製品のリストをjQueryを使用してフォームに作成しようとしています。
これらの商品を追加した後は、formの残りの部分とともにお送りします。

質問は、製品を削除するときに、前に作成した隠れた入力を削除したい場合もあります。

私に手を差し上げてください。

ありがとうございます！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form-receta" id="form-receta"> 
 
    <label for="nombre_receta">Nombre :</label><input id="nombre_receta" name="name_receta" type="text"> 
 

 
    <label for="nombre_ingr">Ingredientes:</label><br /> 
 
    <select style="width:7.7em;display: inline-block;" id="nombre_ingr" name="nombre_ingr"> 
 
<option></option> 
 
<option value="1*Prueba">Prueba</option> 
 
<option value="2*Test">Test</option> 
 
    </select> 
 
    <input id="cantidad_ingr" name="cantidad_ingr" placeholder="cantidad" type="text"> 
 
    <input id="um_ingr" name="um_ingr" placeholder="U.M" type="text"> 
 
    <button type="button" class="add-row">ADD</button> 
 
    <h3>Ingredientes</h3> 
 
    <table> 
 
<tr > 
 
    <th>#</th> 
 
    <th></th> 
 
    <th>Cantidad</th> 
 
    <th>U.M</th> 
 
    <th>Eliminar</th>    
 
</tr> 
 
<tbody id="tabla-ingr"></tbody> 
 
    </table> 
 
    <script> 
 
$(document).ready(function(){ 
 
    var x = 0; 
 
    $(".add-row").click(function(){ 
 
    var id_nombre = $("#nombre_ingr").val(); 
 
    var res = id_nombre.split("*"); 
 

 

 
    var nombre = res[1]; 
 
    var id = res[0]; 
 
    var cantidad = $("#cantidad_ingr").val(); 
 
    var um = $("#um_ingr").val(); 
 
    x = x + 1; 
 
    var markup = "<tr><td>" + x + "</td><td>" + nombre + "</td><td class=\"text-center\">" + cantidad + 
 
     "</td><td class=\"text-center\">" + um + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-xs btn-danger removebutton\"><span class=\"glyphicon glyphicon-remove\"></span>DEL</button></tr>"; 
 
    $("tbody#tabla-ingr").append(markup); 
 

 

 
    $('#form-receta').prepend('<input type="hidden" name="_id_ingr[]" value="'+ id +'" />'); 
 
    $('#form-receta').prepend('<input type="hidden" name="_cantidad_ingr[]" value="'+ cantidad +'" />'); 
 
    $('#form-receta').prepend('<input type="hidden" name="_um_ingr[]" value="'+ um +'" />'); 
 
    }); 
 

 
    $(document).on('click', 'button.removebutton', function() { 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
    }); 
 

 
}); 
 
    </script>

ありがとう！

Answer 1

あなたはこれらの入力隠し要素にIDを設定することができます。次に、行を削除すると、特定の行のIDを検索し、その行に関連する非表示の入力のみを削除することができます。

私はそれが理にかなってほしい！

$(document).ready(function(){ 
 
    var x = 0; 
 
    $(".add-row").click(function(){ 
 
     var id_nombre = $("#nombre_ingr").val(); 
 
     var res = id_nombre.split("*"); 
 

 

 
     var nombre = res[1]; 
 
     var id = res[0]; 
 
     var cantidad = $("#cantidad_ingr").val(); 
 
     var um = $("#um_ingr").val(); 
 
     x = x + 1; 
 
     var markup = "<tr><td>" + x + "</td><td>" + nombre + "</td><td class=\"text-center\">" + cantidad + 
 
     "</td><td class=\"text-center\">" + um + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-xs btn-danger removebutton\"><span class=\"glyphicon glyphicon-remove\"></span>DEL</button></tr>"; 
 
     $("tbody#tabla-ingr").append(markup); 
 

 

 
     $('#form-receta').prepend('<input type="hidden" name="_id_ingr[]" id="_id_ingr_'+x+'" value="'+ id +'" />'); 
 
     $('#form-receta').prepend('<input type="hidden" name="_cantidad_ingr[]" id="_cantidad_ingr_'+x+'" value="'+ cantidad +'" />'); 
 
     $('#form-receta').prepend('<input type="hidden" name="_um_ingr[]" id="_um_ingr_'+x+'" value="'+ um +'" />'); 
 
    }); 
 

 
    $(document).on('click', 'button.removebutton', function() { 
 
     var ingrediente_row = $(this).closest('tr'); 
 
     var ingrediente_id = $(ingrediente_row).children('td')[0].innerHTML; 
 
     
 
     $('#_id_ingr_' + ingrediente_id).remove(); 
 
     $('#_cantidad_ingr_' + ingrediente_id).remove(); 
 
     $('#_um_ingr_' + ingrediente_id).remove(); 
 
     $(ingrediente_row).remove(); 
 
     
 
     return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form-receta" id="form-receta"> 
 
    <label for="nombre_receta">Nombre :</label><input id="nombre_receta" name="name_receta" type="text"> 
 
    \t \t \t 
 
    <label for="nombre_ingr">Ingredientes:</label><br /> 
 
\t <select style="width:7.7em;display: inline-block;" id="nombre_ingr" name="nombre_ingr"> 
 
    <option></option> 
 
    <option value="1*Prueba">Prueba</option> 
 
    <option value="2*Test">Test</option> 
 
\t </select> 
 
    <input id="cantidad_ingr" name="cantidad_ingr" placeholder="cantidad" type="text"> 
 
    <input id="um_ingr" name="um_ingr" placeholder="U.M" type="text"> 
 
\t <button type="button" class="add-row">ADD</button> 
 
</form> 
 

 
<h3>Ingredientes</h3> 
 
<table> 
 
    <tr > 
 
    <th>#</th> \t 
 
    <th></th> 
 
    <th>Cantidad</th> 
 
    <th>U.M</th> 
 
    <th>Eliminar</th> \t \t \t \t \t \t 
 
    </tr> 
 
    <tbody id="tabla-ingr"></tbody> 
 
</table>

Answer 2

あなたはちょうどあなたがボトルトンを削除している間にも削除するには、type=hiddenを選択してJqueryを使用することができます。

$(document).on('click', 'button.removebutton', function() { 
    $(this).closest('tr').remove(); 
    $('[type=hidden]').remove(); 
    return false; 
}); 

Answer 3

あなたは一人でinput要素を削除するinput[type="hidden"]を使用することができます。

コードスニペット：

$(document).on('click', 'button.removebutton', function() { 
    $(this).closest('tr').remove(); 
    $('#form-receta input[type="hidden"]').remove(); 
    return false; 
}); 

Fiddle Demo

Answer 4

単に各隠しフィールドのための特定のクラスを追加して、ボタンを削除するには、このノーを渡す：

$(document).ready(function(){ 
 
    var x=0; 
 
    $(".add-row").click(function(){ 
 
     var id_nombre = $("#nombre_ingr").val(); 
 
     var res = id_nombre.split("*"); 
 

 

 
     var nombre = res[1]; 
 
     var id = res[0]; 
 
     var cantidad = $("#cantidad_ingr").val(); 
 
     var um = $("#um_ingr").val(); 
 
     x = x + 1; 
 
     var markup = "<tr><td>" + x + "</td><td>" + nombre + "</td><td class=\"text-center\">" + cantidad + 
 
     "</td><td class=\"text-center\">" + um + "</td><td class=\"text-center\"><button type=\"button\" class=\"btn btn-xs btn-danger removebutton\" data-id='"+x+"'><span class=\"glyphicon glyphicon-remove\"></span>DEL</button></tr>"; 
 
     $("tbody#tabla-ingr").append(markup); 
 

 

 
     $('#form-receta').prepend('<input type="hidden" name="_id_ingr[]" class="_hidden_'+x+'" value="'+ id +'" />'); 
 
     $('#form-receta').prepend('<input type="hidden" name="_cantidad_ingr[]" class="_hidden_'+x+'" value="'+ cantidad +'" />'); 
 
     $('#form-receta').prepend('<input type="hidden" name="_um_ingr[]" class="_hidden_'+x+'" value="'+ um +'" />'); 
 
    }); 
 

 
    $(document).on('click', 'button.removebutton', function() { 
 
    $('._hidden_'+$(this).data('id')).remove(); 
 
    $(this).closest('tr').remove(); 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form-receta" id="form-receta"> 
 
    <label for="nombre_receta">Nombre :</label><input id="nombre_receta" name="name_receta" type="text"> 
 

 
    <label for="nombre_ingr">Ingredientes:</label><br /> 
 
    <select style="width:7.7em;display: inline-block;" id="nombre_ingr" name="nombre_ingr"> 
 
    <option></option> 
 
    <option value="1*Prueba">Prueba</option> 
 
    <option value="2*Test">Test</option> 
 
\t </select> 
 
    <input id="cantidad_ingr" name="cantidad_ingr" placeholder="cantidad" type="text"> 
 
    <input id="um_ingr" name="um_ingr" placeholder="U.M" type="text"> 
 
    <button type="button" class="add-row">ADD</button> 
 
</form> 
 

 
<h3>Ingredientes</h3> 
 
<table> 
 
    <tr> 
 
    <th>#</th> 
 
    <th></th> 
 
    <th>Cantidad</th> 
 
    <th>U.M</th> 
 
    <th>Eliminar</th> 
 
    </tr> 
 
    <tbody id="tabla-ingr"></tbody> 
 
</table>

Answer 5

隠し入力が追加された場合append()を使用すると、これらの入力の順序はshowと同じになりますtableのn。

したがって、ADDクリックごとに3つの非表示フィールドが作成されます。
DELをクリックすると、クリックが発生したことがわかります。
したがって、削除する3つの非表示フィールドのindexを差し引くことができます。

お客様のHTMLではformに<div id="hiddenInputList"></div>を追加しました。それらを削除するには

// Append the hidden fields to a div, in the same order as the table. 
    $('#hiddenInputList').append('<input type="hidden" name="_id_ingr[]" value="'+ id +'" />'); 
    $('#hiddenInputList').append('<input type="hidden" name="_cantidad_ingr[]" value="'+ cantidad +'" />'); 
    $('#hiddenInputList').append('<input type="hidden" name="_um_ingr[]" value="'+ um +'" />'); 

そして、：：隠しフィールドを追加するためのコードで次に

、このCodePenで

$(document).on('click', 'button.removebutton', function() { 

    var thisTR = $(this).closest("tr"); 
    var thisTR_Index = thisTR.index(); 
    console.log("thisTR_Index: "+thisTR_Index); 

    // Delete the 3 hidden fields (Must do it in the revers order) 
    $('#hiddenInputList').find("[type='hidden']").eq((thisTR_Index*3)+2).remove(); 
    $('#hiddenInputList').find("[type='hidden']").eq((thisTR_Index*3)+1).remove(); 
    $('#hiddenInputList').find("[type='hidden']").eq(thisTR_Index*3).remove(); 

    // Remove the table row. 
    thisTR.remove(); 
    return false; 
}); 

を、その視覚的な例として作ることが...隠されたフィールドの代わりに、私はクラスを使用しました。
追加されたフィールドは緑色です。 DELをクリックすると、赤色に変わったため、正しいものがターゲットに設定されていることがわかります。