Doubt as to whether to exclude specific elements of the clone() function

Question

I have a doubt about the exclusion of specific elements when I use the function clone(). I wonder if I can rule out the elements <b> when I call the function. That is, what is written "Item", "ID", "Select a product" etc; only appear in the first DIV, the others that will be added, only come with input values / select.

This would also make it easier when I was printing the page, aiming that, I could not give a display:none in those elements via media queries. Someone can let me know if it is possible to do this?

index php.:

<div id="allProducts">
                    <div class="produtos-wrap" name="produtos-wrap"> <!---- DIV A SER CLONADA / ADICIONADA !---->
                        <div class=" text-center select_height">
                            <b>Item:</b>
                            <br>
                            <input type="text" class="index font-pop input-div" id="index_produto"
                                   name="index_produto[]" value="1" readonly="true">
                        </div>

                        <div class="text-center select_height">
                            <b>ID:</b>
                            <br>
                            <input class="font-pop number_id_produto input-div" value="0" readonly="true"
                                   name="id_produto[]">
                        </div>

                        <div class="select-produto select_height">
                            <b>Selecione um produto:</b>
                            <select class="selectpicker form-control" data-show-subtext="false"
                                    data-live-search="true" name="select_produtos[]" id="select_produtos" onchange="initProdutos(this)">
                                <?php
                                foreach ($result2 as $item_produtos) {
                                    echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
                                        . $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
                                }
                                ?>
                            </select>
                        </div>

                        <div class="text-center select_height">
                            <b>Embalagem:</b>
                            <br>
                            <input type="text" maxlength="2" class="edit-input font-pop" name="embalagem[]" value="">
                        </div>

                        <div class="text-center select_height">
                            <b>Preço:</b>
                            <br>
                            <input type="text" maxlength="5" name="preco[]" class="edit-input font-pop" value="0">
                        </div>

                        <div class="text-center select_height">
                            <b>Quantidade:</b>
                            <br>
                            <input type="text" maxlength="3" class="edit-input font-pop" value="0"
                                   name="quantidade-produto[]">
                        </div>

                        <div class="text-center select_height text-right">
                            <b>Preço do Produto:</b>
                            <br>
                            <input class="font-pop preco-produto input-div" readonly="true" name="preco-produto[]"
                                   value="0">
                        </div>

                        <div class="text-center select_height" id="div-remove">
                            <button type="button" class="remover glyphicon glyphicon-remove button-produto"></button>
                        </div>
                    </div>
                </div>
                <button type="button" id="add-button" class="glyphicon glyphicon-plus-sign button-produto"></button>
            </div>

Jquery:

$(function () {
    var clone = $('#allProducts').html();
    $(document).on('click', '#add-button', addProd);

    $(document).on('click', '.remover', function () {
        $(this).parents('.produtos-wrap').remove();
        ids();
        calculos();
    });

    function addProd() {
        $('#allProducts').append(clone);
        ids();
    }

    function ids() {
        $("[name='index_produto[]']").each(function (i, e) {
            $(e).val(i + 1);
        });
    }
})

Answer 1

If you want to remove all <b> and the <br>, you can do it in two ways:

Using .remove()

Convert the variable clone, which is a string with the HTML of div, in HTML object with $.parseHTML() and then search for tags <b> and <br> and remove them:

var clone = $.parseHTML($('#allProducts').html());
$("b, br", clone).remove();

Using .replace()

Using a regular expression (regex) to fetch tags <b> and <br>:

var clone = $('#allProducts').html().replace(/<b>.*?<\/b>|<br>/g, "");

Answer 2

Another possibility that complements @Sam’s reply and does not fit in a comment.

var $clone = $('#allProducts').clone();
$clone.find("b, br").remove();

// console.log($clone.html());
// $clone.removeAttr('id').appendTo('body');

And you still have the advantage of being able to manipulate the elements of $clone without having to parse the content again.

$clone.find('.button-produto').on('click', function () {});
$clone.find('.edit-input').on('input change', function () {});
(...)

And so it goes.