Remove css property using jQuery

Question

I am having some problem when trying to remove css properties using jQuery in .js file:

 generateContent: function (point) {
    $(".gm-style-iw .table-round .rows .col").css({ 'transform' : 'none !important' });
        var key = point.key;
        var area = point.area;
        var update = point.update;
        var carparks = point.carparks;

        var content = '<div class="table-round"><div class="header">' + area + '</div><div class="rows"><div class="row row-header"><div class="col center">Development</div><div class="col center">Available Lots</div></div>';
        for (var key2 in carparks) {
            var carpark = carparks[key2];
            var name = carpark.name;
            var lots = carpark.lots;
            var objectId = carpark.objectId;

            content += '<div class="row"><div class="col">' + name + '</div><div id="rtpLot' + objectId + '" class="col center bold">' + lots + '</span></div>';
        }
        content += '</div><div class="footer">Last updated: <span class="lastUpdate">' + update + '</span></div></div>';
        return content;
    },

And my css class look like this:

.gm-style-iw .table-round { padding: 15px 20px; width: 300px; }
.gm-style-iw .table-round .header { font-size: 32px; font-weight: bold; margin: 0 0 15px; }
.gm-style-iw .table-round .rows { color: #333; background: #eee; }
.gm-style-iw .table-round .rows .row { border-top: 1px solid #fff; }
.gm-style-iw .table-round .rows .row-header { background: #495b67; }
.gm-style-iw .table-round .row-header .col { color: #fff; font-weight: bold; } 
.gm-style-iw .table-round .rows .col { display: inline-block; padding: 10px 15px; width: 120px; font-size: 18px; position: relative; top: 50%; transform: translate(-50%,-50%); vertical-align: top; }
.gm-style-iw .table-round .rows .bold { font-weight: bold; }
.gm-style-iw .table-round .rows .center {  text-align: center; }
.table-round .footer { font-size: 13px; font-style:italic; text-align: right; padding: 10px 0 0; background-color: #FFF; }

Basically it works perfectly on chrome but not IE. I wonder why is it so?

Thanks in advance.

EDIT

var content = '<div class="table-round"><div class="header">' + area + '</div><div class="rows"><div class="row row-header"><div class="col center">Development</div><div class="col center">Available Lots</div></div><div></div>';
        for (var key2 in carparks) {
            var carpark = carparks[key2];
            var name = carpark.name;
            var lots = carpark.lots;
            var objectId = carpark.objectId;

            content += '<div class="row"><div class="col">' + name + '</div><div id="rtpLot' + objectId + '" class="col center bold">' + lots + '</div></div>';
        }
        content += '<div class="footer">Last updated: <span class="lastUpdate">' + update + '</span></div>';
        return content;

I dont see where you are removing CSS via jQuery. Also what do you mean by working perfectly? What do you expect to happen? — stackErr
– stackErr, Commented Mar 18, 2014 at 1:30

stackErr · Accepted Answer · 2014-03-18 02:06:14Z

1

Your HTML is malformed, here is a fix:

    var content = '<div class="table-round">' +
                       '<div class="header">' + area + '</div>' +
                       '<div class="rows">' +
                           '<div class="row row-header">' +
                               '<div class="col center">Development</div>' +
                               '<div class="col center">Available Lots</div>' +
                           '</div>';
    for (var key2 in carparks) {
        var carpark = carparks[key2];
        var name = carpark.name;
        var lots = carpark.lots;
        var objectId = carpark.objectId;

        content += '<div class="row">' +
                        '<div class="col">' + name + '</div>' +
                        '<div id="rtpLot' + objectId + '" class="col center bold">' + lots + '</div>' +
                   '</div>';
    }
    content += '</div>' +
        '<div class="footer">Last updated: <span class="lastUpdate">' + update + '</span></div>' +
    '</div>';
    return content;
},

For your css, you can try:

$(".gm-style-iw .table-round .rows .col").css({ '-ms-transform' : 'none !important' });

OR:

$(".gm-style-iw .table-round .rows .col").attr('style', function(i,s) { return s + 'transform: none !important; -ms-transform: none !important;' });

OR:

$('.gm-style-iw .table-round .rows .col').css('cssText', 'transform: none !important');

edited Mar 18, 2014 at 2:06

answered Mar 18, 2014 at 1:10

stackErr

4,1704 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2424370 Over a year ago

Sorry but would you mind to post a solution? I am quite confused about it.

stackErr Over a year ago

@Carol I suggest you read through this: htmldog.com/guides/html/beginner/tags Understand how to use HTML and then make sense of your code. I can post a solution but it will only be a guess as I cannot tell what you are trying to do.

user2424370 Over a year ago

The table-round should wrap all the elements together, that's why I closed it at the third line

user2424370 Over a year ago

Can you help me check if my edited portion was correct? It does not works tho.

user2424370 Over a year ago

Unfortunately, the problem is still there.

|

Collectives™ on Stack Overflow

Remove css property using jQuery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related