Hide nested button based on an inputs value-CodePudding

I have a form with a button inside it which I need to hide.

  <form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit"  title="">Remove submission</button>
  </form>

There are multiple forms with the exact same values as the above, the only difference being the value="removesubmissionconfirm". Is it possible to hide the button based on that value using only css?

I've tried a lot of things and nothing seems to work.

TIA.

CodePudding user response：

input[value="removesubmissionconfirm"]   button {
  display: none;
}

 <form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit"  title="">Remove submission</button>
  </form>

CodePudding user response：

Generally no, but it may be in this specific example, considering the fact that the button comes directly after the hidden action field. Try this:

input[value="removesubmissionconfirm"]   button {
  display: none;
}

CodePudding user response：

You can do it using the attribute selector and the selector :

input[value="removesubmissionconfirm"]   button {
  display: none;
}

<form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit"  title="">Remove submission</button>
  </form>