対応する入力フィールドの横にあるボタンを削除

Question

私は数字の入力フィールドの配列を持っており、それぞれに削除ボタンを配置する必要があります。参考のためにここにはfiddleがあります。

機能を作ろうとしましたが（下を参照）、機能しません。 、事前に感謝を助けてください:)

function delamount() { 
    $(".delbtn").click(function() { 

     var a = $(this).data('value'); 
     var b = $("#value" + a); 

     b.value = '0.00'; 


    }); 
} 

Answer 1

起こっていくつかのものがあります：最初に、あなたのフィドルはjQueryのを使用するために知りません。次に、はい、あなたはonclickを定義し、クリックするとonclick関数をバインドするように指示します。これは大規模な繰り返しループになります。これを試してみてください：

var a, b; 
 
    $(".delbtn").on("click", function() { 
 

 
    a = $(this).data('for'); 
 
    b = $("#"+a); 
 

 
    b.val('0.00'); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width: 25px; float:left;"> 
 
    <button data-for="value01" class="delbtn" id="delamt01">X</button> 
 
    <button data-for="value02" class="delbtn" id="delamt02">X</button> 
 
    <button data-for="value03" class="delbtn" id="delamt03">X</button> 
 
    <button data-for="value04" class="delbtn" id="delamt04">X</button> 
 
    <button data-for="value05" class="delbtn" id="delamt05">X</button> 
 
</div> 
 

 

 
<div style="width: 20%; float:left;"> 
 
    <input class="sizebox" type="number" id="value01" name="value01" value="0.00" /> 
 
    <br> 
 
    <input class="sizebox" type="number" id="value02" name="value02" value="0.00" /> 
 
    <br> 
 
    <input class="sizebox" type="number" id="value03" name="value03" value="0.00"/> 
 
    <br> 
 
    <input class="sizebox" type="number" id="value04" name="value04" value="0.00"/> 
 
    <br> 
 
    <input class="sizebox" type="number" id="value05" name="value05" value="0.00"/> 
 
    <br> 
 
</div>

私はonclickの削除、およびjQueryを介して、クリックハンドラをバインドしました。データ要素をボタン自体に移動しました。それが役に立てば幸い！

さて、私は変更を加えました - データ値属性はデータ用です（ラベルの属性とよく似ています）。これにより、ターゲット入力の一貫した命名に対する依存性が減少します。それ以外は、ほとんど同じです。