CODEWITHSUNDEEP
javascriptjquery
user2943188
user2943188

Reputation: 49

Using JQuery to remove child elements based on parent's class

I have a simple list of organizations with the only structural difference being the class "member" on some of the parent divs. I would like to remove some child elements based on the parent's class. 

 <div class="views-row views-row-1 views-row-odd member">
    <div class="views-field views-field-title">
        <span class="field-content"><a href="[Link 1 goes here]">[Name 1 goes here]</a></span>
    </div>

    <div class="views-field views-field-field-phone field-content">
        [Phone 1 goes here]
    </div>

    <div class="views-field views-field-field-email field-content">
        [Email 1 goes here]
    </div>

    <div class="views-field views-field-field-description field-content">
        [Description 1 goes here]
    </div>
</div>

    <div class="views-row views-row-2 views-row-even">
        <div class="views-field views-field-title">
            <span class="field-content"><a href="[Link 2 goes here]">[Name 2 goes here]</a></span>
        </div>

        <div class="views-field views-field-field-phone field-content">
            [Phone 2 goes here]
        </div>

        <div class="views-field views-field-field-email field-content">
            [Email 2 goes here]
        </div>

        <div class=
        "views-field views-field-field-description field-content">
            [Description 2 goes here]
        </div>
    </div>

Because Group 1 contains the class "member" I'd like it to remain unchanged. However, as Group 2 is not a member, I'd like to remove the divs with the classes .views-field-field-phone and .views-field-field-email.

I believe I need to create a function using .not. This:

$(".views-row").not(".member").css("border", "5px solid red");

will correctly outline the correct parent, but I'm having difficulty targeting the children.

Any insight appreciated.

Thank you.

Upvotes: 2

Views: 934

Answers (2)

Andrei Dvoynos
Andrei Dvoynos

Reputation: 1145

I guess this should do what you're looking for:

$("div.views-row").not(".member").find(".views-field-field-phone, .views-field-field-email").css("color", "red");

Edit: If you want to delete, just call the remove() method at the end instead of css

$("div.views-row").not(".member").find(".views-field-field-phone, .views-field-field-email").remove();

Take a look at this jsBin:

http://jsbin.com/mokuwano/1/edit?html,js,output

Upvotes: 0

sifriday
sifriday

Reputation: 4462

jQuery find should help:

http://api.jquery.com/find/

specifically:

$(".views-row").not(".member").find(".views-field-field-phone").remove();
$(".views-row").not(".member").find(".views-field-field-email").remove();

Upvotes: 1

Related Questions