I deleted the assigned values in a datatable, using ajax

I have the following html code

 <table id="idtabledetalleventa" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">

    <thead>
        <tr>
            <th >Codigo               </th>
            <th >Cantidad             </th>
            <th >Unidad               </th>
            <th >Detalle              </th>
            <th >Precio               </th>
            <th >Desc1                </th>
            <th >Valor                </th>
            <th >Eliminar             </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th colspan="8" class="footer_detalleventa">
                <input id="idbtn_agregar" type="button" class="add habilita_escritura_btn" value="Agregar item" />
                <input id="idbtn_grabarventa" type="button" class="save grabaventa" value="Grabar Venta" />
            </th>
        </tr>
    </tfoot>
    <tbody>
        <tr class="filas" id="fila_1" data-fila="1">
            <td>
                <input type="submit" id="idcodigo_btn1" class="codigo_btn" value="Buscar" data-fila="1"  />
            </td>
            <td>
                <input id="idcantidad_1" type="number" class="detalle cantidad"  data-fila="1"   />
            </td>
            <td>
                <input id="idunidad_1" type="text" class="detalle"  />
            </td>
            <td>
                <input id="iddetalle_1" type="text" class="detalle" value="" />
            </td>
            <td>
                <input id="idprecio_1" type="text" class="detalle" style="text-align:right"  readonly  />
            </td>
            <td>
                <input id="iddesc1_1" type="number" class="detalle"   />
            </td>
            <td>
                <input id="idvalor_1" type="text" class="detalle"   readonly />
            </td>
            <td>
                <input type="button" class="elimina_fila detalle_btn" value="DEL" data-idfila="fila_1"  />
            </td>
        </tr>
        <tr id="fila_2" class="filas" data-fila="2">
            <td>
                <input type="submit" id="idcodigo_btn2" class="codigo_btn"  value="Buscar" data-fila="2" />
            </td>
            <td>
                <input id="idcantidad_2" type="number" class="detalle cantidad"  data-fila="2"  />
            </td>
            <td>
                <input id="idunidad_2" type="text" class="detalle"  />
            </td>
            <td>
                <input id="iddetalle_2" type="text" class="detalle" />
            </td>
            <td>
                <input id="idprecio_2" type="text" class="detalle" style="text-align:right"  readonly />
            </td>
            <td>
                <input id="iddesc1_2" type="number" class="detalle"  />
            </td>
            <td>
                <input id="idvalor_2" type="text" class="detalle"  readonly  />
            </td>
            <td>
                <input type="button" class="elimina_fila detalle_btn" value="DEL" data-idfila="fila_2" />
            </td>
        </tr>
    </tbody>
</table>

I rely on the example on this page: link

Inside the document ready I have the following:

 var tabla = $("#idtabledetalleventa").DataTable({
            "scrollX": true, "scrollY": "250px", "scrollCollapse": true, "searching": false, "paging": false, "ordering": false, "info": false, "autowidth": false,
        "columns":
        [
        { "width": "5%","targets":0},
        { "width": "10%", "targets": 0 },
        { "width": "5%", "targets": 0 },
        { "width": "50%", "targets": 0 },
        { "width": "10%", "targets": 0 },
        { "width": "5%", "targets": 0 },
        { "width": "10%", "targets": 0 },
        { "width": "5%", "targets": 0 }
        ]
        });
        //var tabla = $("#idtabledetalleventa").DataTable({ destroy: true });
        $(".footer_detalleventa").css("display", "");
        var counter = 3;

        $('.add').on('click', function () {
           var data= tabla.row.add([
                '<input id="idcodigo_btn' + counter + '" type="submit" class="codigo_btn"  value="Buscar" data-fila="' + counter + '"   />',
                '<input id="idcantidad_' + counter + '" type="number"  class="detalle cantidad" data-fila="' + counter + '" />',
                '<input id="idunidad_' + counter + '" type="text"   />',
                '<input id="iddetalle_' + counter + '" type="text"   />',
                '<input id="idprecio_' + counter + '" type="text" style="text-align:right" readonly   />',
                '<input id="iddesc1_' + counter + '" type="number"  />',
                '<input id="idvalor_' + counter + '" class="detalle" type="text"  readonly  />',
                '<input type="button" class="elimina_fila" value="DEL" data-idfila="fila_' + counter + '"  />',


            ]).draw(false);
            tabla.$('tr').addClass('filas');
            tabla.rows(data).nodes().to$().attr("id", "fila_" + counter);
            tabla.rows(data).nodes().to$().attr("data-fila", counter);

            counter++;
        });

By means of a button, I copy the values to a certain row of the table, through this way:

         $("#idproductosencontrados tbody tr td input.selector").on("click", function (e) {
        // $('.selector').click(function (e) {
  //      $('.selector').on("click", function (e) {
             e.preventDefault();

                var codigosel = $(this).data("codigo");
                $("#codigo_oculto").val(codigosel);
            $("#modal_productos").modal("hide");
            $.ajax({
                type: "POST",
                url: '/Notas/Leer/',
                traditional: true,
                data: { codigo: codigosel},
                DataType: 'json',
                success: function (data) {
                    var codigo = data.codigojson;
                    var nombre = data.nombrejson;
                    var unidad = data.unidadjson;
                    var precio = data.preciojson;
                    var fila = $("#idfila").val();
                    $("#idcodigo_btn" + fila.toString()).val(codigosel);
                    $("#idtabledetalleventa #idcantidad_" + fila.toString()).val("1.00");
                    //$("#idtabledetalleventa input[id=iddetalle_" + fila.toString() + "]").val(nombre);
                    $("#idtabledetalleventa input[id=iddetalle_" + fila.toString() + "]").attr("value", nombre);
                    $("#idtabledetalleventa #idunidad_" + fila.toString()).val(unidad);
                    $("#idtabledetalleventa #idprecio_" + fila.toString()).val(precio);
                    $("#idtabledetalleventa #idvalor_" + fila.toString()).val(codigosel);
                    multiplicar(1, precio, fila.toString());

                }, error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        });

So far so good, the values are assigned as follows within the succes of ajax with json.

But when I click the row to expand the detail of the table, the values are lost, there is some way to solve this problem. And I would like to know how to close all open expansions of the detail through a button.