Estoy desarrollando una aplicación web donde una de las páginas tiene el siguiente aspecto: 
Mi problema radica en los botones 'Eliminar elemento'. No estoy seguro exactamente de cómo acceder al div de envoltura correcto usando jQuery. El HTML que tengo está debajo:
<div id="hwAddition">
<div>
<div id="itemNumber" style="text-decoration: underline; font-size: large; display: inline-block;">Item #</div>
<input class="removeItemButton" type="button" value="Remove Item" id="removeItemButton" onclick="removeHWItem()" style="display: inline-block;">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="hwDescription" style="text-decoration: underline;">Description</label>
<form:textarea id="hwDescription" type="text"
class="form-control short" path="hwDescription"
name="hwDescription" placeholder="Description" maxlength="100"
rows="2" style="resize: none;" />
</div>
<div class="form-group col-md-4">
<label for="hwSerialNumber" style="text-decoration: underline;">Serial
#</label>
<form:input type="text" class="form-control" path="hwSerialNumber"
name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for="hwModelNumber" style="text-decoration: underline;">Model
#</label>
<form:input type="text" class="form-control" path="hwModelNumber"
name="hwModelNumber" placeholder="Model #" maxlength="100" />
</div>
</div>
<hr />
</div>
Y aquí está la función JS que no estoy seguro de cómo escribir:
function removeHWItem() {
}
No quiero hacer un this.remove() aquí porque no solo quiero eliminar el botón, sino que quiero eliminar el envoltorio '#hwAddition' para que se eliminen todos los elementos del elemento. ¿Cómo trataría de acceder al div de envoltura actual?
1
24 jul. 2020 a las 07:03
2 respuestas
La mejor respuesta
Simplemente puede usar parentElement () para eliminar el botón y su padre también.
En la función
removeHWItem()thisse refiere a qué elemento está haciendo clic.
Ejecute el fragmento a continuación para verlo funcionar.
function removeHWItem(e) {
e.parentElement.parentElement.remove();
}<div id="hwAddition">
<div>
<div id="itemNumber" style="text-decoration: underline; font-size: large; display: inline-block;">Item #</div>
<input class="removeItemButton" type="button" value="Remove Item" id="removeItemButton" onclick="removeHWItem(this)" style="display: inline-block;">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="hwDescription" style="text-decoration: underline;">Description</label>
<form:textarea id="hwDescription" type="text" class="form-control short" path="hwDescription" name="hwDescription" placeholder="Description" maxlength="100" rows="2" style="resize: none;" />
</div>
<div class="form-group col-md-4">
<label for="hwSerialNumber" style="text-decoration: underline;">Serial
#</label>
<form:input type="text" class="form-control" path="hwSerialNumber" name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for="hwModelNumber" style="text-decoration: underline;">Model
#</label>
<form:input type="text" class="form-control" path="hwModelNumber" name="hwModelNumber" placeholder="Model #" maxlength="100" />
</div>
</div>
<hr />
</div>
<div id="hwAddition">
<div>
<div id="itemNumber" style="text-decoration: underline; font-size: large; display: inline-block;">Item #</div>
<input class="removeItemButton" type="button" value="Remove Item" id="removeItemButton" onclick="removeHWItem(this)" style="display: inline-block;">
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="hwDescription" style="text-decoration: underline;">Description</label>
<form:textarea id="hwDescription" type="text" class="form-control short" path="hwDescription" name="hwDescription" placeholder="Description" maxlength="100" rows="2" style="resize: none;" />
</div>
<div class="form-group col-md-4">
<label for="hwSerialNumber" style="text-decoration: underline;">Serial
#</label>
<form:input type="text" class="form-control" path="hwSerialNumber" name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for="hwModelNumber" style="text-decoration: underline;">Model
#</label>
<form:input type="text" class="form-control" path="hwModelNumber" name="hwModelNumber" placeholder="Model #" maxlength="100" />
</div>
</div>
<hr />
</div>
3
24 jul. 2020 a las 04:08
Si usa jQuery, use $ (this) .parent (), es #itemNumber selector
-2
24 jul. 2020 a las 04:07