CODEWITHSUNDEEP
jquery
Thunder Blade
Thunder Blade

Reputation: 127

Add other jQuery function to each button in the same class

I want to add function that will remove two divs, to all buttons of removeButton class at my page. Example: first button function will remove div with id "Region0Div", second button function will remove div with id "Region1Div" etc.. Remove buttons are dynamically generated by AjaxFileUpload control, and i cant find it by id. I tried something like iterating, but it dont work becouse function is assigned to all buttons of class at the same time.

$(document).change(function () {
            $(".removeButton").click(function () {
                $("#Region" + itr + "Div").remove();
                $("#Comment" + itr + "Div").remove();
                itr = itr + 1;
            });
        });

EDIT:

I tried each but it still doesnt work, assigning Region0Div remove to all buttons.

var itr = 0;

        $(document).change(function () {

            $(".removeButton").each(function () {
                console.log(itr);
                $(this).click(function () {

                    $("#Region" + itr + "Div").remove();
                    $("#Comment" + itr + "Div").remove();
                    itr = itr + 1;
                });
            });
        });

If i put the itr = itr + 1 outside click function, in the each function, it also doesnt work.

Upvotes: 0

Views: 209

Answers (5)

Shivam
Shivam

Reputation: 2443

try this 

$(".removeButton").on("click", function(i){
    $("#Region" + i + "Div").remove();
    $("#Comment" + i + "Div").remove();
 });

hope this help you

Upvotes: 0

Dziad Borowy
Dziad Borowy

Reputation: 12579

You shouldn't assign event handlers when something happen. The general rule is - assign event handlers to the elements that exist on the page and delegate:

let's assume you have a button like this:

<button class="removeButton" data-div1="d1" data-div2="d2">Remove</button>
<div id="d1"></div>
<div id="d2"></div>

and JS like this:

$('body').on('click', '.removeButton', function () {
    var btn = $(this), id1 = btn.data('div1'), id2 = btn.data('div2');
    $('#' + id1).remove();
    $('#' + id2).remove();
});

If you do it this way you:

  • only assign 1 event listener instead of as many as buttons;
  • don't have to loop through then every time;
  • don't have to update the handlers whenever you reload buttons;

Upvotes: 2

codebreaker
codebreaker

Reputation: 1485

Hi this below code will do..

$(".removeButton").each(function (i) {
                $("#Region" + i + "Div").remove();
                $("#Comment" + i + "Div").remove();

            });

Upvotes: 0

Adil
Adil

Reputation: 148110

You can try using attribute Starts With Selector [name^="value"]

$("[id^=Region]" ).remove();

Or you can use each() to make the exact id

$("[id^=Region]").each(function(index, value){
    $("#Region" + index + "Div").remove();
})

Upvotes: 0

ED-209
ED-209

Reputation: 4746

If you use 

$(".removeButton").each()

you can loop through them and make changes one at a time.

JQuery Each()

Upvotes: 0

Related Questions