So I am a month into learning JS and I am building a website project that calculates the delivery cost based on the type of parcel and dimensions of the parcel I have put the dimensions input field (length width and height) in a div (dimensions) In the event that the parcel is either "cash" or "envelope", I would want to have the dimensions div removed as such details would not be necessary. This is my code.
<select name="" id="typeOfParcel" class="form-control" onchange="assign(),removeDimensions()">
<option selected disabled>Select type of Parcel</option>
<option value="document" class="form-input form-control form-group">Document</option>
<option value="box" class="form-input form-control form-group">Box</option>
<option value="envelope" class="form-input form-control form-group">Envelope</option>
<option value="Cash" class="form-input form-control form-group">Cash</option>
<option value="Groceries" class="form-input form-control form-group">Groceries</option>
<option value="Other" class="form-input form-control form-group">Other</option>
</select>
<p class="text-centre">Dimensions and Weight of the Parcel</p>
<div class=" container form-group row p-1" id="dimensions">
<div class="col"><label for="length">Length (cm)</label>
<input type="number" name="dimensions" id="length" class="form-control" required
placeholder="cm" min="0" max="160">
</div>
<div class="col"><label for="width">Width (cm)</label>
<input type="number" name="dimensions" id="width" class="form-control" required
placeholder="cm" min="0" max="160">
</div>
<div class="col"><label for="height">Height (cm)</label>
<input type="number" name="dimensions" id="height" class="form-control" required
placeholder="cm" min="0" max="120">
</div>
<div class="col"><label for="weight">Weight (kgs)</label>
<input type="number" name="weight" id="weight" class="form-control" required
placeholder="kg" min="0" max="100">
</div>
</div>
JS
function removeDimensions() {
dimensions=document.getElementById("dimensions").innerHTML;
if (typeOfParcel==("envelope"||"cash")){
dimensions=document.getElementById("dimensions").innerHTML;
dimensions.parentNode.removeChild(dimensions);
}
I have also tried dimensions.remove() and stil get this error in the console:caught TypeError: Cannot read property 'removeChild' of undefined at removeDimensions. Any ideas o how I can achieve this