在附加到动态内容中的元素之前，删除最后一个TD

Question

I have this piece of code where content is generated dynamically and it's executed each time a SELECT change it's value:

var htmlFabricanteBody = '',
    htmlSelFabricanteBody;

htmlFabricanteBody += '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlFabricanteBody += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';
htmlFabricanteBody += '</tr>';

htmlSelFabricanteBody = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlSelFabricanteBody += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.nombre + '</td>';
htmlSelFabricanteBody += '<td>' + data.ent.direccion + '</td>';
htmlSelFabricanteBody += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlSelFabricanteBody += '<td>' + data.ent.telefono + '</td>';
htmlSelFabricanteBody += '</tr>';

$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");

The only difference between htmlFabricanteBody and htmlSelFabricanteBody is this line:

htmlFabricanteBody += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';

In order to avoid DRY, it's possible to remove the line above from htmlFabricanteBody before append to #selFabricanteBody ? In other words #fabricanteBody should have the content of htmlFabricanteBody intact as it's, #selFabricanteBody should have the same content of htmlFabricanteBody minus the line I'm talking about, any advice? Workaround?

Answer 1

The simplest way, while maintaining your code structure, is this:

var htmlFabricanteBase = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
htmlFabricanteBase += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.nombre + '</td>';
htmlFabricanteBase += '<td>' + data.ent.direccion + '</td>';
htmlFabricanteBase += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
htmlFabricanteBase += '<td>' + data.ent.telefono + '</td>';

var htmlFabricanteBody = htmlSelFabricanteBody = htmlFabricanteBase;

htmlFabricanteBody += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';
htmlFabricanteBody += '</tr>';

htmlSelFabricanteBody += '</tr>';

$(htmlFabricanteBody).appendTo("#fabricanteBody");
$(htmlSelFabricanteBody).appendTo("#selFabricanteBody");

However, a more elegant and powerful solution would be to leverage a templating language, like handlebars . If you anticipate the complexity of this increasing, then a template language will become increasingly more useful.

Answer 2

can combine into a simple function that determines whether to add link or not. Seems a lot easier to read also since your variable names are very similar.

The other benefit is you can move the function out of the logic flow in your script and put it anywhere

function getRowHtml(data, showLink) {
    var row = '<tr data-idproductosolicitud="' + data.ent.idProductoSolicitud + '" data-id="' + data.ent.id + '">';
    row += '<td><input type="checkbox" name="fabLinkChoice[]" value="' + data.ent.idProductoSolicitud + '"></td>';
    row += '<td>' + data.ent.nombre + '</td>';
    row += '<td>' + data.ent.direccion + '</td>';
    row += '<td class="has_pais fabTd-' + data.ent.idProductoSolicitud + '"></td>';
    row += '<td>' + data.ent.telefono + '</td>';
    /* only variation */
    if (showLink) {
        row += '<td><a href="javascript:void(0)" class="modalAgregarPaises" data-fabricanteDistribuidorId="' + data.ent.id + '" data-productoSolicitudId="' + data.ent.idProductoSolicitud + '" data-toggle="modal" data-target="#addPaisesFabricante" data-backdrop="static"><i class="fa fa-plus-circle" data-toggle="tooltip" data-placement="top" title="' + Translator.trans('boton.editable_paises', {}, 'AppBundle') + '"></i></a></td>';
    }
    row += '</tr>';    
    return row;
}

$(getRowHtml(data,true)).appendTo("#fabricanteBody");
$(getRowHtml(data,false)).appendTo("#selFabricanteBody");