How to remove style attribute added with jquery

Question

I am using a devExpress table with some custom requirements.

(UPDATE) Took a break from this for a day and went back and did it properly using React Styling! Thanks for suggestions

In the screenshot I have certain cells disabled. However the user wants all cells to look disabled other that the row selected.

Using this

   window
  .$("td")
  .not(document.getElementById(this.state.selection[0]))
  .not(document.getElementsByClassName(this.state.selection[0]))
  .not("td:first-child")
  .not(window.$("td:contains('iPlay')"))
  .not(window.$("td:contains('iLOE')"))
  .not(window.$("td:contains('iInvest')"))
  .not(window.$("td:contains('SPACER')"))
  .not(window.$("td:contains('$MM')"))
  .not(window.$("td:contains('$/BOE')"))
  .attr("style", "color:#868a8f");
window
  .$("td > div > div > div > input")
  .not(document.getElementsByClassName(this.state.selection[0]))
  .attr("style", "color:#868a8f");

I managed to achieve my desired result on page load

My problem is when I select a new row I cannot remove that color I applied before when it was not selected. I am trying to use "has" to find the selected row and change the color back to inherit or completely remove the style attribute.

    window
  .$("td")
  .has(document.getElementById(this.state.selection[0]))
  .has(document.getElementsByClassName(this.state.selection[0]))
  .not("td:first-child")
  .not(window.$("td:contains('iPlay')"))
  .not(window.$("td:contains('iLOE')"))
  .not(window.$("td:contains('iInvest')"))
  .not(window.$("td:contains('SPACER')"))
  .not(window.$("td:contains('$MM')"))
  .not(window.$("td:contains('$/BOE')"))
  .attr("style", "color:inherit");
window
  .$("td > div > div > div > input")
  .has(document.getElementsByClassName(this.state.selection[0]))
  .attr("style", "color:inherit");

If it helps I do have the ids of the rows that are NOT selected. I tried to do something with that but did not have any luck

  const otherRows = ExpensesUtils.ROW_PROPS.filter(x => x !== this.state.selection[0]);
for (let i = 0; i < otherRows.length; i += 1) {
  window
  .$("td")
  .has(document.getElementById(otherRows[i]))
  .has(document.getElementsByClassName(otherRows[i]))
  .attr("style", "color:inherit");
  window
  .$("td > div > div > div > input")
  .has(document.getElementById(otherRows[i]))
  .has(document.getElementsByClassName(otherRows[i]))
  .attr("style", "color:inherit");
}

link to HTML Table HTML

this.state.selection[0] is the selected rowId from the list below

I have applied the the rowIds to classes in the nested components. I could not figure out another way to access them.

  const ROW_PROPS = [
  "leaseAndWellExpense",
  "leaseAndWellExpenseBoe",
  "iloeLeaseAndWellExpense",
  "iloeLeaseAndWellExpenseBoe",
  "gnaLeaseAndWell",
  "gnaLeaseAndWellBoe",
  "transportation",
  "transportationBoe",
  "divisionGnA",
  "divisionGnABoe",
  "gatheringProcessing",
  "gatheringProcessingBoe",
  "hqGnA",
  "hqGnABoe",
  "interestExpense",
  "interestExpenseBoe",
  "netProdBoe",
  "leaseImpairments",
  "leaseImpairmentsBoe",
  "ddaProducing",
  "ddaProducingBoe",
  "iInvestDdaProducing",
  "iInvestDdaProducingBoe",
  "ddaGatheringProcessing",
  "ddaGatheringProcessingBoe",
  "iInvestDdaGatheringProcessing",
  "iInvestDdaGatheringProcessingBoe",
  "marketingCosts",
  "otherIncomeExpense",
  "otherIncomeExpenseBoe",
  "otherRevenue",
  "incomeTaxProvision",
  "incomeTaxProvisionBoe",
  "severanceTaxes",
  "severanceTaxesPercent",
  "currentTaxes",
  "currentTaxesRate",
  "netWellHeadRevenue",
];

Can you please add (part) of the HTML, so we know what to work with. See [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Reyno, Jan 18 '21 at 14:19
This is horrific JS. Why prefix window on $ ? Why mix DOM and jQuery? I cannot even guess what `.has(document.getElementById(this.state.selection[0]))` is supposed to do? Does the td contain an element wifh ID = this.state.selection[0] ??? That is the same as `$('#'+this.state.selection[0])` and then we can filter stuff instead of using not contains. If I only knew what `this.state.selection[0]` actually does — mplungjan, Jan 18 '21 at 14:19
ALl of those selectors.... yikes, there probably is a lot better way to write that code. — epascarello, Jan 18 '21 at 14:20
@epascarello yes I am not familiar with jquery and I have a deadline! — texas697, Jan 18 '21 at 14:23
You should just create a style sheet rule in the CSS and add a class. It is a lot easier to remove a class. — epascarello, Jan 18 '21 at 14:24
`const arr = ['iPlay','iLOE','iInvest','SPACER','$MM','$/BOE'] $("td").filter(function() { return !arr.includes(this.text) }).toggleClass("green",someBoolean)` — mplungjan, Jan 18 '21 at 14:31
What's this supposed to mean? `window.$("td")`. And a lot of other stuff in this code. You really need to re-think and simplify it. As you've decided to use jQuery, do so for everything. Don't mix it up with vanilla JS. — emerson.marini, Jan 27 '21 at 15:06
Are you using any other framework, like ReactJS? It looks like there's something similar to it going on... — emerson.marini, Jan 27 '21 at 15:08
@melancia yes, react. I dont know what im doing here. thats why i need help — texas697, Jan 27 '21 at 15:09
I wouldn't really mix ReactJS and jQuery. Their approach to coding is very, very different. — emerson.marini, Jan 27 '21 at 15:12
Starting on this thread you might find your way around achieving your goal. Just scrap the whole jQuery approach: [Correct way to handle conditional styling in React](https://stackoverflow.com/questions/35762351/correct-way-to-handle-conditional-styling-in-react) — emerson.marini, Jan 27 '21 at 15:23
@texas697 you should create a minimal example with your React code using [codesandbox.io](https://codesandbox.io/) and then describe what exactly your problem is and what you want it to do. For example, *"I want all cells of the table to be disabled but allow the users to select rows and enable the selected cells"*. — Christos Lytras, Jan 27 '21 at 20:46
went a different route without jquery. used react styling. thanks — texas697, Jan 28 '21 at 13:33

score 4 · Answer 1 · edited Feb 03 '21 at 14:02

The easiest way of doing this is by creating a CSS rule's stylesheet.

In that stylesheet, you should define 2 classes.

Let's suppose 1 for your desired CSS rules and the other for the default/none rules.

I am just showing you the simplest version of doing this thing but with another aspect.

$('#b1').on('click', function() {
  $('.c1').removeClass('c1');
  $(this).addClass('c2');
});

.c1 {
  color: red;
}

.c2 {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="b1">Change</button>
<p class="c1">This is a Test Line.</p>

score 2 · Answer 2 · answered Feb 02 '21 at 02:32

The easiest way is

 $('#idName').on('click', function()
{
    $('.className').removeClass('removeClassName');
    $(this).addClass('addClassName');
});

The code above means that when a button with the id of IdName is clicked, the element with className will be removing the class of removeClassName, and adding the class of addClassName.

For further clarification you can have a look at Removing CSS Using JQuery Documentation

score 0 · Answer 3 · answered Feb 03 '21 at 12:43

There is another way by which you can achieve it. Instead of playing with style attribute, since it takes the highest specificity so somewhere it might create an issue. Instead of that you can use toggleClass. First add your default styling to table, whenever you click any row you can make use of toggle class Toggle Class Example

Example.

$("td > div > div > div").click(function(){
  $("input").toggleClass("main");

})

How to remove style attribute added with jquery

3 Answers3

Linked