I am attempting to call the remove() jQuery function on a div tag which has been added after the page is loaded. I am adding this div link this:

$(probablyHide).html(addedDiv);
<div class=probablyHide>
 <div onClick="myMethod(this)" class="hide" id="1">i want to hide this div 1</div>
 <div onClick="myMethod(this)" class="hide" id="2">i want to hide this div 2</div>
 <div onClick="myMethod(this)" class="hide" id="3">i want to hide this div 3</div>
</div>

However for some reason my remove() is not working properly.

function myMethod(div)
{
    var button = $(div).closest('div.otherDiv').find("select[id^='stuff']");    
    button.val(div.id); 
    $(div).remove();
    $(button).trigger('change');
};

What is weird is if I edit out the following lines in my function. The div will be deleted.

  button.val(div.id); 
    $(button).trigger('change');

I am attempting to call the remove() jQuery function on a div tag which has been added after the page is loaded. I am adding this div link this:

$(probablyHide).html(addedDiv);
<div class=probablyHide>
 <div onClick="myMethod(this)" class="hide" id="1">i want to hide this div 1</div>
 <div onClick="myMethod(this)" class="hide" id="2">i want to hide this div 2</div>
 <div onClick="myMethod(this)" class="hide" id="3">i want to hide this div 3</div>
</div>

However for some reason my remove() is not working properly.

function myMethod(div)
{
    var button = $(div).closest('div.otherDiv').find("select[id^='stuff']");    
    button.val(div.id); 
    $(div).remove();
    $(button).trigger('change');
};

What is weird is if I edit out the following lines in my function. The div will be deleted.

  button.val(div.id); 
    $(button).trigger('change');

• javascript
• jquery

• 1 @DanyCaissy - He's assigning it with onClick="myMethod(this)", so he can't do that. div is the raw HTML element. – Justin Morgan Commented Jul 18, 2013 at 14:49
• 1 I'm not sure why people hate this question so much. I've seen far worse on SO. – Justin Morgan Commented Jul 18, 2013 at 15:32
• 1 @JustinMorgan Absolutely. It's especially annoying when downvoters don't explain why they've done it. How does that benefit the munity? And I quote from StackOverflow documentation: 'Down-voting should be reserved for extreme cases. It's not meant as a substitute for munication and editing.' – Holf Commented Jul 18, 2013 at 18:57

3 Answers 3

Use jQuery event handlers if you are going to use jQuery:

$(document).on('click', '.hide', function(){
    var $div = $(this);
    var button= $div.closest('div.otherDiv').find("select[id^='stuff']"); 
    button.val(this.id); 
    $div.remove();
    $(button).trigger('change');
});

Also please try not to use numeric IDs for elements.

It's probably not working as you have the JavaScript loading with onLoad.

Simple fix would be to use jQuery event handlers

Demo: enter link description here

//$('.probablyHide').html(addedDiv);
//Use the following:
addDiv($('.probablyHide'), addedDiv);


function myMethod(div){

    var button= $(div).closest('div.otherDiv').find("select[id^='stuff']");
    button.val(div.id); 
    $(div).remove();
    $(button).trigger('change');
}

function addDiv(container, element) {
    container.append(element);
    element.click(function() {
          myMethod(this);  
    });
}

$('.probablyHide .hide').each(function() {
    $(this).click(function() {
          myMethod(this);  
    });
})

Fixed HTML:

<div class="probablyHide">
    <div class="hide" id="1"> i want to hide this div 1 </div>
    <div class="hide" id="2"> i want to hide this div 2 </div>
    <div class="hide" id="3"> i want to hide this div 3</div>
</div>

Your code is fine. Proof: http://jsfiddle/uQ9Xz/

There are only three things you need to make sure of:

1. Your handler (myMethod) needs to exist when the divs are born. The best way to do that is to put it in the head, and make sure you're not creating it after document.load or anything like that.

2. jQuery's .closest() method looks for something containing the current element. So there needs to be a div with class="otherDiv", and it needs to contain both your probablyHide div and a button whose ID starts with "stuff". Your DOM may have the wrong structure.

3. Is button supposed to be a button or a dropdown list? You're treating it like a button, but your code is looking for select[id^='stuff'].

So just fix the selector and put your code in the <head>:

<script type="text/javascript">
   function myMethod(div) {    
      var button = $(div)
                      .closest('div.otherDiv')
                      .find("button[id^='stuff']"); //note the different selector

      //etc..
   }
</script>

Inside the <body>:

<div class="otherDiv">
    <button id="stuff">stuff</button>

    <div class="probablyHide">
        <div onClick="myMethod(this)" class="hide" id="1"> i want to hide this div 1 </div>
        <div onClick="myMethod(this)" class="hide" id="2"> i want to hide this div 2 </div>
        <div onClick="myMethod(this)" class="hide" id="3"> i want to hide this div 3</div>
    </div>
</div>