Acceso a la división de envoltura al hacer clic en el botón

Question

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?

javascript html

1

CDA the Programmer 24 jul. 2020 a las 07:03

Answer 1

Simplemente puede usar parentElement () para eliminar el botón y su padre también.

En la función removeHWItem() this se 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

AlwaysHelping 24 jul. 2020 a las 04:08

Answer 2

Si usa jQuery, use $ (this) .parent (), es #itemNumber selector

-2

Thắng Lê Việt 24 jul. 2020 a las 04:07

Acceso a la división de envoltura al hacer clic en el botón

2 respuestas

Nuevas preguntas

javascript