Удалить кнопку рядом с соответствующим полем ввода

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. Я переместил элемент данных к самой кнопке. Надеюсь, поможет!

Хорошо, тогда я сделал изменение - атрибут data-value теперь используется для данных (так же, как атрибут label для атрибута). Это уменьшает зависимость от последовательного именования целевого ввода. Кроме этого, почти то же самое.