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" >
    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

There are two separate problems:

1. 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()
   // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^
   

2. You have two class attributes on the izbrisi elements:

   <button  type="button" >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  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" >
    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button">Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button">Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button">Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button">Izbriši</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

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" >
    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>

    <div >
        <input type="number"  name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div >
            <button  type="button" >Izbriši</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>