How to remove the dynamically created text box using jQuery

How to remove the dynamically created text box using jQuery

I am new one to jQuery.I have a issues on dynamically add and remove text box using jQuery.Here adding dynamic text box is working perfectly,but issues on removing of text box.

Its working but it will remove all the row of text boxes were created.But need to remove only the text box related to button or row.please check the below code.

function addMore() {
$("<DIV>").load("<?php echo $buyinput;$row_buydisp=0;?>", function() {
var n = $('.product-item').length + 1;
if( 5 < n ) {
alert('Stop it!');
                    return false;
                }
$("#product").append($(this).html());
});
    
}

function deleteRow() {
$('DIV.product-item').each(function(index, item){
$(item).remove();
         });
}

<DIV class="float-left">
<input type="button" name="del_item" value="Remove" id="buy_remove" class="bt" onClick="deleteRow();" />
</DIV>