0
I was needing a help with object manipulation, I have this simple html with a form and a table where are listed the form entries that will be sent to the database, In this activity I unfortunately can’t use ajax so the upload will have to be in this same method. But when someone wants to remove some typed element they can even take visually from the list (it has a very simple function at the end of js), but not from the object, so they end up going to the server with information other than that contained in the list. How do I implement this function so that the same elements that leave the table are excluded from the object?
<body>
<fieldset>
<legend>Cadastro de livros</legend>
<input type="text" id="titulo" placeholder="titulo"><br>
<textarea id="descricao"></textarea> <br>
<select id="genero">
<option value="Romance">Romance</option>
<option value="Drama">Drama</option>
<option value="Terror">Terror</option>
<option value="Ficção">Ficção</option>
<option value="Técnico">Técnico</option>
</select>
<br>
<input type="text" id="autor" placeholder="autor">
<br>
<button id="add_acervo">Adicionar a lista</button>
</fieldset>
<h1>Catálogo</h1>
<table id="acervo" style="border: 1px solid black;">
<tr><th>Título</th><th>Descrição</th><th>Gênero</th><th>Autor</th><th></th></tr>
</table>
<form action="http://rafaelescalfoni.net/web/livros.php"
method="post">
<input type="hidden" name="acervo_post">
<input type="submit" id="salvar_no_bd" value="Salvar no BD">
</form>
</body>
$(function(){
//aqui o seu código
function Livro (titulo, genero, descricao, autor){
this.titulo = titulo;
this.genero = genero;
this.descricao = descricao;
this.autor = autor;
}
let acervoArray = new Array();
$("#add_acervo").click(function(){
//aqui a gente preenche a tabela ;-)
let tituloLivro =$("#titulo").val();
let descricao =$("#descricao").val();
let genero =$("#genero").val();
let autor =$("#autor").val();
let livro = new Livro(tituloLivro, descricao, genero, autor);
acervoArray.push(livro);
$("input[name='acervo_post']").val(JSON.stringify(acervoArray));
$("#acervo")
.append(
$("<tr>")
.append(
$("<td>").text(tituloLivro)
)
.append(
$("<td>").text(descricao)
)
.append(
$("<td>").text(genero)
)
.append(
$("<td>").text(autor)
)
.append(
$("<td>")
.append($("<img>").attr({'src':'lixeira.png', 'width':'40px', 'height':'40px'}))
)
)
$("#acervo").on("click","img", function(){
$(this).parents("#acervo tr").remove();
})
})
});