Question 10805 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Changing style of Previous & next elements with Javascript – Jquery

I’ve got a form on a webpage, but i don’t have access to the HTML or CSS of the page. So any manipulation has to be done with JavascriptJQuery.

the form looks like this:
enter image description here

And I’m trying to change the styling on some elements before & after the "Company Name" (input) field. I can identifytarget this fieldelement as it has a unique id, and i already have some code which is changing the styling of this element. The id of this element is "parentcustomerid_name".

Using inspection in the browser i get this HTML (the ‘parentcustomerid_name’ element is selected).

The div with the class "input-group" immediately above it (lower tree) i want to add the style of ‘width:100%’.

The div with the class "input-group-btn" below it, i want to add the style of ‘display:none’ (the purpose is to hide the 2 buttons).

I can’t target those element’s by there class as it would effect other fields like "Prefix".
enter image description here

I don’t believe i could use ‘previousSibling’ as it’s on a different tree level.
I don’t believe i could use ‘nextSibling’ as it would return a hidden input field.
(well in testing im having issues)

at the moment this is the code i have – its just disabling the field (so nothing can be entered/selected), as disabling the field removed the border i added it back in, and as disabling the field also removed padding before the text i added that in. Obviously as im disabling the field then i want to remove the buttons on the right hand side as they still function.

$(document).ready(function () {
document.getElementById("parentcustomerid_name").disabled = true;
document.getElementById("parentcustomerid_name").style.padding = "0px 0px 0px 12px";
document.getElementById("parentcustomerid_name").style.border = "1px solid #949494";
}

Any help is greatly appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @Milan Lakhani comments above i got the answer:

    document.getElementById("parentcustomerid_name").disabled = true;
document.getElementById("parentcustomerid_name").style.padding = "0px 0px 0px 12px";
document.getElementById("parentcustomerid_name").style.border = "1px solid #949494";
document.getElementById("parentcustomerid_name").parentNode.style.width = "100%";
document.getElementById("parentcustomerid_name").parentNode.querySelector(".input-group-btn").style.display = "none";

    this is how the form looks now: enter image description here


  2. 0

    You can query for the closest parent with a particular class:

    const group = document
  .querySelector('#parentcustomerid_name')
  .closest('.input-group');

group.classList.add('altered');
    .altered {
  background: red;
  padding: 1rem;
}

.altered .input-group-button {
  display: none;
}
    <div class="control">
  <div class="input-group" role="none">
    <input id="parentcustomerid_name" class="form-control" />
    <div class="input-group-button">
      <button type="button">Clear</button>
      <button type="button">Open</button>
    </div>
  </div>
</div>

    Or, you can use CSS; although this is still experimental:

    .control:has(.input-group) {
  background: red;
  padding: 1rem;
}

.control:has(.input-group) .input-group-button {
  display: none;
}
    <div class="control">
  <div class="input-group" role="none">
    <input id="parentcustomerid_name" class="form-control" />
    <div class="input-group-button">
      <button type="button">Clear</button>
      <button type="button">Open</button>
    </div>
  </div>
</div>

    Since you don’t have control of the CSS, you can inject a script tag:

    document.head.insertAdjacentHTML('beforeend', `
  <style type="text/css">
    .control:has(.input-group) {
      background: red;
      padding: 1rem;
    }
    .control:has(.input-group) .input-group-button {
      display: none;
    }
  </style>
`);
    <div class="control">
  <div class="input-group" role="none">
    <input id="parentcustomerid_name" class="form-control" />
    <div class="input-group-button">
      <button type="button">Clear</button>
      <button type="button">Open</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search