You have two issues. Firstly min-width is not an attribute, it’s a CSS property, so calling removeAttr() will have no effect. To reset the property you need to use the css() method.

The second issue is with your use of css(). You can provide an object to it, however the syntax you’re using in the object is invalid. You should provide a separate key and value, not a single string. Alternatively, you can provide the key/value of the property to set as separate arguments.

To correct the issue, try this:

let $childDiv = $("#childDiv")
$childDiv.parent('.ui-dialog').css('width', '250px');
$childDiv.parent('.ui-widget-content').css('min-width', 'auto');

More informaotion on the use of css() is available in the jQuery documentation

I also met similiar situation as yours. Firstly, you cannot change css class itself using jQuery. Secondly, I will use new class to overwrite those parameter and easy to control. For your requirement in the example I will do like this:

Add new class:

.ui-widget-content-change {
      min-width:0px !important;
 }
.ui-dialog-change {
      width: 250px !important;
}

Then apply jquery

 $("#childDiv").parent().addClass('ui-widget-content-change');
 $("#childDiv").parent().addClass('ui-dialog-change');

When you don’t want to use them, just remove those classes.

You cannot modify the content of CSS-files using jQuery. With jQuery you can only modify the styles specified in the styles-Attribute of an element.

$("#childDiv").parent('.ui-dialog').css('width', '250px'); adds style="width: 250px" to the parent div with the ui-dialog class. However this will not change the width, as you have marked width in the CSS-file as important.

I am trying to remove the property min-width from the class ui-widget-content and trying to modify the property from width: auto !important; to width: 250px; for class ui-dialog.

Please note that these 2 changes should only be applied to the parent of childDiv and the implementation of the classes ui-widget-content and ui-dialog should be untouched elsewhere.

Any suggestions would be really appreciated.

<div class="ui-widget-content ui-dialog">
    <div id="childDiv">
        ...
    </div>
    ...
</div>

.ui-widget-content {
    min-width: 360px;
    ...
}

.ui-dialog {
    width: auto !important;
    ...
}

What I tried(With no success):-

For removal:

$("#childDiv").parent('.ui-widget-content').removeAttr("min-width");

For modification:

$("#childDiv").parent('.ui-dialog').css({"width: 250px"});