CODEWITHSUNDEEP
javascriptjquery
user2524908
user2524908

Reputation: 871

jQuery remove() is not working on div tag when added dynamically

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');

Upvotes: 0

Views: 8369

Answers (3)

Justin Morgan
Justin Morgan

Reputation: 30760

Your code is fine. Proof: http://jsfiddle.net/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>

Upvotes: 0

Steven10172
Steven10172

Reputation: 2013

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>

Upvotes: 1

Naftali
Naftali

Reputation: 146300

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.

Upvotes: 4

Related Questions