Question

I am trying to remove an attribute of all elements that match the class of the child of the element that is clicked on.

for example

<span class="parent">
    <span class="child1">
        <a href="mylink">text</a>
    </span>
</span>

<span class="child1">
    <a href="mylink">text</a>
</span>

I have code that removes the href attribute from the element that is clicked on. However, I would like to be able to also remove any elements that have the same link.

I can of course do this be specifying the specific class, but I want the code to find the class of the child of the parent that is clicked, then find any matching classes and remove the href.

In this case, the person would click on .parent element, the code would search for the class of the child element, .child1, remove the href and also remove the href of any element that also has a matching class of the child element, .child1.

The code would therefore do the same for the following situation

<span class="parent">
    <span class="child2">
        <a href="mylink">text</a>
    </span>
</span>

<span class="child2">
    <a href="mylink">text</a>
</span>

removing the href for all .child2 classes.

The reason for this is because I need to use this functionality many times, and I do not want to have to write different code each time specifying the class for which to remove the href.

I am thinking the construct would be something along the lines of the following, though I am not sure what combinations of jQuery to use to achieve it.

$("parant").click(function () {
    $.find(this.childrenClass, function () {
        $.removeAtt("href");   
    });
});

Answer 1

The code should be self-explanatory:

$('.parent').click(function() {
    // Get all classes from child elements.
    var classes = $(this).children().map(function() {
        return this.className.split(/\s+/);
    }).get();

    // Find any element having one of those classes, find all `a` children
    // and remove the href attribute.
    $('.' + classes.join(',.')).children('a').removeAttr('href');
});

Here I’m just looking for any element having a class in common with any of the children. You will have to adjust the code to restrict it to certain elements if you want to.

The code can also be simplified, depending on your actual markup (i.e. if each parent will only have one child or each child only has one class).

DEMO