wawan Setiyawan wawan Setiyawan - 3 months ago 6
jQuery Question

remove element div that selected

i have a problem with jquery

remove()
:



function removeVendor(e){
e.remove("div.jumbotron");
}

<!-- this 1 div -->
<div class="jumbotron in_hanca">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-5 control-label">Nama Vendor</label>
<div class="col-md-7">
<select name="nama_vendor[]" class="form-control" required="">
<option value="">--Pilih Vendor--</option>

</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-md-4 control-label">Jumlah</label>
<div class="col-md-8">
<input type="text" class="form-control" name="jumlah_di_vendor[]" required="">
</div>
</div>
</div>
<div class="col-md-2">
<button onclick="addVendor()" type="button" class="btn_tambah_vendor">add</button>
<button onclick="removeVendor(this)" type="button" class="btn_kurangi_vendor">remove</button>
</div>
</div>

<br>
<br>

<!-- this 2 div -->
<div class="jumbotron in_hanca">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-5 control-label">Nama Vendor</label>
<div class="col-md-7">
<select name="nama_vendor[]" class="form-control" required="">
<option value="">--Pilih Vendor--</option>

</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-md-4 control-label">Jumlah</label>
<div class="col-md-8">
<input type="text" class="form-control" name="jumlah_di_vendor[]" required="">
</div>
</div>
</div>
<div class="col-md-2">
<button onclick="addVendor()" type="button" class="btn_tambah_vendor">add</button>
<button onclick="removeVendor(this)" type="button" class="btn_kurangi_vendor">remove</button>
</div>
</div>





if i click the button remove, its just remove button not all of
div.jumbotron
how to fix it ? . **this text dummy for allow code ** "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra tortor nisi, scelerisque vehicula orci accumsan vel. Etiam placerat, velit quis blandit rutrum, sem nisi hendrerit ligula, eget finibus dui velit accumsan ipsum. Donec neque justo, ornare non gravida vitae, condimentum et purus. Mauris vestibulum neque arcu, "

Answer

Made the changes. Note that: 1. You had not prepended a dot to the element named 'in_hanca_clone' in the line :

$(this).closest('.in_hanca_clone').remove();
  1. I have changed the line :

    $('.btn_kurangi_vendor').click(function ()

to

$('body').on('click','.btn_kurangi_vendor',function() {

This is to ensure that dynamically added "Remove" buttons continue to function properly. Swap these lines, add a vendor and then try to remove the new vendor to see what I mean

$(document).ready(function (){
	addVendor();
	$('body').on('click','.btn_kurangi_vendor',function() {
		$(this).closest('.in_hanca_clone').remove();
	});
  
});

function addVendor() {
	var new_vendor = $(".hidden_input").find(".in_hanca").clone().addClass("in_hanca_clone");
	$(".vendor_dan_jumlah:last").append(new_vendor);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- data hidden inputan nama vendor dan jumlah untuk di clone-->
        <div class="hidden_input" style="display: none">
            <div class="jumbotron in_hanca">
                <div class="col-md-6">
                    <div class="form-group">
                        <label class="col-md-5 control-label">Nama Vendor</label>
                        <div class="col-md-7">
                            <select name="id_vendor[]" class="form-control" required="">
                                <option value="">--Pilih Vendor--</option>
                               
                            </select>
                        </div>
                    </div>   
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label class="col-md-4 control-label">Jumlah</label>
                        <div class="col-md-8">
                            <input type="number" class="form-control" name="jumlah_di_vendor[]" required="">
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <button onclick="addVendor()" type="button" data-toggle="tooltip" data-placement="top" title="tambah vendor" class="btn btn-info btn-flat btn-xs pull-left btn_tambah_vendor"><i class="fa fa-plus"></i>add</button>
                    <button type="button" data-toggle="tooltip" data-placement="top" title="kurangi vendor" class="btn btn-danger btn-flat btn-xs pull-right btn_kurangi_vendor"><i class="fa fa-minus"></i>remove</button>
                </div>
            </div>
        </div>


<div class="row">
                                    <div class="col-md-12 vendor_dan_jumlah">
                                      </div>
  </div>