The issue: Keyword this refers to the primary selector upon which on() method is attached to, but I want it to refer to the selector that is being clicked. Also, click event fires both on input field and button instead of only the specified selector .izbrisi (a button). Goal is to remove the div with a class input-group when button with a class izbrisi is clicked.
I am studying this in one my of courses and I am required to use this variation of code specifically, but I can't make it work. Thus, please do not alter the code in a way that it is completely different. Thank you.
$("#brojevi-polja").on("click", $(".izbrisi"), function() {
$(this).closest(".input-group").remove();
});<div id="brojevi-polja" class="col-4">
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbriši</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>There are two separate problems:
You're calling on incorrectly. To do event delegation, the second argument should be a string containing a CSS seletor, not a jQuery object. So change
$("#brojevi-polja").on("click", $(".izbrisi"), function()
to
$("#brojevi-polja").on("click", ".izbrisi", function()
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^
You have two class attributes on the izbrisi elements:
<button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbriši</button>
<!-- ^^^^^ ^^^^^ -->
You can't do that, it's invalid HTML. Only the first one is used, the second is completely ignored. Instead:
<button class="btn btn-outline-secondary izbrisi" type="button">Izbriši</button>
<!-- ^^^^^ ^^^^^^^ -->
If you fix those, it works:
$("#brojevi-polja").on("click", ".izbrisi", function() {
$(this).closest(".input-group").remove();
});<div id="brojevi-polja" class="col-4">
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button">Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button">Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button">Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button">Izbriši</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>There few things wrong
1 You have 2 class attribute on your buttons 2 you are using a jquery selector in the click listener
this works
$("#brojevi-polja").on("click", ".izbrisi", function(e) {
e.preventDefault()
$(this).closest(".input-group").remove();
});<div id="brojevi-polja" class="col-4">
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button" >Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button" >Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button" >Izbriši</button>
</div>
</div>
<div class="input-group mb-3">
<input type="number" class="form-control" name="broj" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary izbrisi" type="button" >Izbriši</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>