CODEWITHSUNDEEP
javascriptjquery
Unbreakable
Unbreakable

Reputation: 8132

How to replace/remove the child class using parent ID or DIV

Suppose I want to remove the abc class in the div contained just inside the "oneClass" and replace it with another class name may be "xyz", Note that I DO NOT want the "abc class" inside the "twoClass" to be replaced Can some one guide me how to achieve it? 

<div class = "oneClass" id = "oneId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Heath
        </div>
    </div>

After applying jquery or javascript the output should be

<div class = "oneClass" id = "oneId">
        <div class = "xyz">  // CLASS NAME GOT CHANGED
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // CLASS NAME REMAINES SAME
            Heath
        </div>
    </div>

Kindly guide me here.

Upvotes: 1

Views: 1113

Answers (5)

Rohit Sharma
Rohit Sharma

Reputation: 3334

You should use the id of the parent div.

$('#oneID > .abc').removeClass('abc').addClass('xyz');


$('#oneId > .abc').removeClass('abc').addClass('xyz');
.xyz {
  width: 100px;
  height: 100px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="oneClass" id="oneId">
  <div class="abc">
    <!-- NOT ALLOWED TO ADD ANYTHING HERE Phil -->
  </div>
</div>

<div class="twoClass" id="twoId">
  <div class="abc">
    <!-- NOT ALLOWED TO ADD ANYTHING HERE Heath -->
  </div>
</div>

Upvotes: 1

H77
H77

Reputation: 5967

Use the child selector > in jQuery to select the element with class abc directly under oneClass. Then simply remove the abc class and add the xyz class to it.

$(".oneClass > .abc").removeClass("abc").addClass("xyz")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "oneClass" id = "oneId">
   <div class = "abc">
      Phil
   </div>
</div>

<div class ="twoClass" id = "twoId">
   <div class = "abc">
      Heath
   </div>
</div>

Upvotes: 2

4b0
4b0

Reputation: 22321

find,removeClass and addClass do what you want like this.

$('.oneClass').find('.abc').removeClass('abc').addClass('xyz');
.xyz{
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "oneClass" id = "oneId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Heath
        </div>
    </div>

Upvotes: 0

Neeraj Pathak
Neeraj Pathak

Reputation: 759

<div class = "oneClass" id = "oneId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Heath
        </div>
    </div>

        function find(){

            $('div#oneID').childern('div').addClass('success');

            $('div#oneID').childern('div').removeClass('success');

        };

try this one.

Upvotes: 0

Mr.Pandya
Mr.Pandya

Reputation: 2038

var a = $('.oneClass');
var childEle = a.children();
Array.prototype.forEach.call(childEle,function(ele) {
    ele.classList = "xyz";
})

Upvotes: 0

Related Questions