将类添加到父 div

Question

I am working with the google maps drawing manager. They don't put id's or class names on the drawing tools button bar so I'm trying to do this myself.

First I want to remove the circle button which the below works fine, but I want to add my own button so need to add a class name to the parent div "gmnoprint" but google has about 5 div's all with the same class name. I just want to add it to the one where the circle button was found.

<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint">
    <div>
        <div> <== This is what I found in my search
            <span>
                <div>
                    <img></img>
                </div>
            </span>
        </div>
    </div>
</div>  

I am able to find the element I want and remove it, but adding a class to its wrapper div is proving a bit difficult for me.

This works for removing the button

$(".gmnoprint").each(function(){
   $(this).find("[title='Draw a circle']").remove();
});

This doesn't work.. Just add's the class to all ".gmnoprint" div's

$(".gmnoprint").each(function(){
   $(this).find("[title='Draw a circle']").remove().parent().addClass("test");
});

Answer 1

remove() removes the element from the DOM and returns the free-standing jquery object which has no connection to the DOM at all. A call to parent() after calling remove() is incorrect and that likely is the cause for your issue.

Try splitting your statements to:

var toRemove = $(this).find("[title='Draw a circle']");
toRemove.parent().addClass("test");
toRemove.remove();

Answer 2

You can use jQuery insertAfter and out your button after that default button then remove it.

$(".gmnoprint").each(function(){
   var defBtn = $(this).find("[title='Draw a circle']");
   $('<button class="my-button" />').insertAfter(defBtn);
   defBtn.remove();
});

Or use jQuery after like this:

$(".gmnoprint").each(function(){
   $(this)
      .find("[title='Draw a circle']")
      .after($('<button class="my-button" />'))
      .remove();
});

Answer 3

You can use child selector to target the elements

$(".gmnoprint > div > div").addClass('myClassName');

At that point you could replace the html of the whole div , or find the span and replace it's inner html. Using html() method you don't need to use remove() as it will replace all contents of the element(s)

 $(".gmnoprint > div > div").addClass('myClassName').find('span').html('<newButton>');

API Reference : http://api.jquery.com/child-selector/