El problema: la palabra clave this se refiere al selector principal al que se adjunta el método on(), pero quiero que se refiera al selector en el que se hace clic. Además, el evento de clic se activa tanto en el campo de entrada como en el botón en lugar de solo en el selector especificado .izbrisi (un botón). El objetivo es eliminar el div con un grupo de entrada de clase cuando se hace clic en el botón con una clase izbrisi .
Estoy estudiando esto en uno de mis cursos y debo usar esta variación de código específicamente, pero no puedo hacer que funcione. Por lo tanto, no modifique el código de forma que sea completamente diferente. Gracias.
$("#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>Hay dos problemas separados:
Estás on incorrectamente. Para realizar la delegación de eventos, el segundo argumento debe ser una cadena que contenga un selector de CSS, no un objeto jQuery. Así que cambia
$("#brojevi-polja").on("click", $(".izbrisi"), function()a
$("#brojevi-polja").on("click", ".izbrisi", function() // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^ Tiene dos atributos de class en los elementos izbrisi :
<button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbriši</button> <!-- ^^^^^ ^^^^^ -->No puedes hacer eso, es HTML no válido. Solo se usa el primero, el segundo se ignora por completo. En cambio:
<button class="btn btn-outline-secondary izbrisi" type="button">Izbriši</button> <!-- ^^^^^ ^^^^^^^ -->Si los arreglas, funciona:
$("#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>Hay pocas cosas mal
1 Tiene 2 atributos de clase en sus botones 2 está utilizando un selector jquery en el detector de clics
esto funciona
$("#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>