Tengo un problema con mi entrada dinámica, quiero agregar y eliminar la entrada, pero cuando intento eliminar, la acción elimina la vista que no coincide con la posición de la vista, por ejemplo, digamos que tengo una lista como esta.
cuando traté de eliminar input2 en lugar de input1 eliminado
Mi acercamiento
html
<div class="row" id="list-barang-dipilih"> </div>jquery
$('#tambah-barang').click(() => { var idBarang = $('#option-barang option:selected').val() var namaBarang = $('#option-barang option:selected').text().trim() var jumlahBarang = $('#jumlah-barang').val() var htmlElement = '<div class="col-md-12" id="barang-baru">'+ '<div class="col-md-6">'+ '<div class="form-group">'+ `<input type="text" class="form-control" id="nama-barang-dipilih" name="nama_barang" placeholder="Nama barang" value="${namaBarang}" readonly>`+ `<input type="hidden" class="form-control" id="id-barang-dipilih" name="id_barang" placeholder="id_barang" value="${idBarang}" readonly>`+ '</div>'+ '</div>'+ '<div class="col-md-4">'+ '<div class="form-group">'+ `<input type="text" class="form-control" id="jumlah-barang-dipilih" name="jumlah_barang" placeholder="Jumlah item.." value="${jumlahBarang}" readonly>`+ '</div>'+ '</div>' + '<div class="col-md-2">'+ '<div class="form-group">'+ '<button type="button" class="close" aria-label="Close">'+ '<span aria-hidden="true" id="hapus-barang">×</span>'+ '</button>'+ '</div>'+ '</div>'+ '</div>' $('#list-barang-dipilih').append( htmlElement ) }) $(document).on('click', '#hapus-barang', ()=>{ $('#barang-baru').remove() })entonces id="tambah-barang" para agregar el campo e id="hapus-barang" para eliminar el campo
también después de que se agrega la entrada y el usuario completa la entrada, quiero obtener todos los datos de todas las entradas
Ya resuelvo el problema, solo agrego el índice al envoltorio cuando agrego la vista
para que se vuelva así
const listItem = () => { var i = 0; $('#tambah-barang').click(() => { i++; var idBarang = $('#option-barang option:selected').val() var namaBarang = $('#option-barang option:selected').text().trim() var jumlahBarang = $('#jumlah-barang').val() var htmlElement = `<div class="col-md-12" id="barang-baru-${i}">`+ '<div class="col-md-6">'+ '<div class="form-group">'+ `<input type="text" class="form-control" id="nama-barang-dipilih" name="nama_barang" placeholder="Nama barang" value="${namaBarang}" readonly>`+ `<input type="hidden" class="form-control" id="id-barang-dipilih" name="id_barang" placeholder="id_barang" value="${idBarang}" readonly>`+ '</div>'+ '</div>'+ '<div class="col-md-4">'+ '<div class="form-group">'+ `<input type="text" class="form-control" id="jumlah-barang-dipilih" name="jumlah_barang" placeholder="Jumlah item.." value="${jumlahBarang}" readonly>`+ '</div>'+ '</div>' + '<div class="col-md-2">'+ '<div class="form-group">'+ '<button type="button" class="close" aria-label="Close">'+ `<span aria-hidden="true" id="hapus-barang" onClick="onRemoveItem(${i})">×</span>`+ '</button>'+ '</div>'+ '</div>'+ '</div>' $('#list-barang-dipilih').append( htmlElement ) }) $('#save-transaksi').click(() => { $('input[id^="nama-barang-dipilih"]').each((input) =>{ var value1 = $('input[id^="nama-barang-dipilih"]').val() console.log(value1) }) })}
function onRemoveItem(i) { $(documento).on('click', '#hapus-barang', ()=>{ $( #barang-baru-${i} ).remove() }) }