Fiz um código para adicionar uma DIV (wrap-produtos) com todos os elementos HTML que estão dentro desta assim que é pressionado o botão "+". Cada DIV é adicionada uma embaixo da outra com as mesmas características, o que muda é o autoincremento que é feito no "Número" e em seus names e id's. Cada DIV obtém em sua direita um botão "X", onde este botão precisa excluir a DIV a qual o mesmo pertence, ou seja, cada botão exclui o seu index. Como posso fazer essa função, onde ao excluir a DIV de escolha, é feito automaticamente o decremento do index do "Número", por exemplo, se tem o Número 1,2,3,4 e eu excluir o 3, o Número 4 vai para 3, e o proximo add será o 4 novamente.
index.php:
<div id="allProducts" name="allProducts">
<div class="produtos-wrap" id="wrap-produtos-1" name="wrap-produtos-1"> <!---- div que é clonada !---->
<div class=" text-center select_height">
<b>Número:</b>
<div id="index" class="font-pop">1</div>
</div>
<div class=" select_height" id="div_produtos">
<b>Produto:</b>
<select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos-1" id="select_produtos-1" onchange="initProdutos(1);">
<?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" id="embalagem-1" name="embalagem-1" value="">
</div>
<div class="text-center select_height">
<b>Preço:</b>
<br>
<input type="text" maxlength="5" id="preco-1" name="preco-1" class="edit-input font-pop">
</div>
<div class="text-center select_height">
<b>Quantidade:</b>
<br>
<input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto-1" name="quantidade-produto-1">
</div>
<div class="text-center select_height">
<b>Preço do Produto:</b>
<div id="preco-produto-1" name="preco-produto-1" class="font-pop"></div>
</div>
<div class="text-center select_height">
<button id="remove-1" name="remove-1" class="remover-1" onclick="remove()">X</button>
</div>
</div>
<hr>
</div>
<button id="add-button" onclick="addProduct()">+</button>
elements.php ( de onde é trago o conteudo para adicionar as DIVs ):
<?php $id = $_GET['id']; ?>
<div class="produtos-wrap" id="wrap-produtos-<?= $id ?>" name="wrap-produtos-<?= $id ?>">
<div class=" text-center select_height">
<b>Número:</b>
<div id="index" class="font-pop"><?= $id ?></div>
</div>
<div class=" select_height" id="div_produtos">
<b>Produto:</b>
<select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos-<?= $id ?>" id="select_produtos-<?= $id ?>" onchange="initProdutos(<?= $id ?>);">
<?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" id="embalagem-<?= $id ?>" name="embalagem-<?= $id ?>" value="">
</div>
<div class="text-center select_height">
<b>Preço:</b>
<br>
<input type="text" maxlength="5" id="preco-<?= $id ?>" name="preco-<?= $id ?>" class="edit-input font-pop">
</div>
<div class="text-center select_height">
<b>Quantidade:</b>
<br>
<input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto-<?= $id ?>" name="quantidade-produto-<?= $id ?>">
</div>
<div class="text-center select_height">
<b>Preço do Produto:</b>
<div id="preco-produto-<?= $id ?>" name="preco-produto-<?= $id ?>" class="font-pop"></div>
</div>
<div class="text-center select_height">
<button id="remove-<?= $id ?>" name="remove-<?= $id ?>" class="remover-<?= $id ?>">X</button>
</div>
</div>
<hr>
Function addProduct():
var index = 1;
function addProduct() {
var id = index + 1;
$.ajax({
type: "GET",
url: "elements.php?id=" + id,
//CASO DÊ TUDO CERTO
success: function(data) {
var div = document.getElementById('allProducts');
div.innerHTML += data;
index = id;
},
error: function(request, error) {
console.log(error);
// console.log("Request: " + JSON.stringify(request));
}
});
}
Function remove():
function remove() {
const remover = $('.remover');
const div = $('#produtos-wrap-');
remover.onclick(div.remove());
index - 1;
}