Estoy usando Bootstrap para generar pestañas. Tengo un botón de reinicio que borra el contenido de la pestaña pero no funciona. Aquí está mi código:

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <?php echo "Some text" ?>
        <br><br>
        <button type="button" class="btn btn-primary" value="Reset" onclick="document.nav-tabContent.nav-home.value=''">Clear</button>
    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>

Así que mi botón "Borrar" debería borrar el texto, "Algún texto". ¿Cómo se haría para borrar el texto con el botón?

Tks

0
Tran 8 sep. 2018 a las 04:47

4 respuestas

La mejor respuesta

Puede intentar envolver <?php echo 'some text'; ?> en, por ejemplo, una etiqueta <p> y agregar este código al evento onlick en la etiqueta del botón

<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>

Prueba este ejemplo en vivo con muchas pestañas

const navItems = document.querySelectorAll('.nav-item')
const tabPanes = document.querySelectorAll('.tab-pane');

navItems.forEach(item => item.addEventListener('click', clear));

function clear(event) {
    event.preventDefault();

    const element = event.target;
    const paneId = element.getAttribute('href').split('#')[1];
    const pane = document.querySelector(`#${paneId}`);

    clearNavItems();
    clearPanes();

    element.classList.add('active');

    pane.classList.add('show');
    pane.classList.add('active');
}

function clearNavItems() {
    navItems.forEach(item => item.classList.remove('active'));
}

function clearPanes() {
    tabPanes.forEach(pane => {
        pane.classList.remove('active');
        pane.classList.remove('show');
    });
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus qui, pariatur ipsum ducimus numquam porro optio adipisci, nemo, cupiditate unde mollitia accusantium, suscipit. Explicabo, officiis corrupti praesentium. Quis, unde, fugit.</p>
                <button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto.</p>
                <button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
            </div>
            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa mollitia unde perspiciatis?</p>
                <button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
            </div>
        </div>
    </div>
0
user615274 8 sep. 2018 a las 02:25

Siguiendo lo que tienes actualmente, haría la siguiente edición:

<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    <p id="nav-home-text"><?php echo "Some text" ?></p>
    <br><br>
    <button type="button" class="btn btn-primary" value="Reset" onclick="document.getElementById('nav-home-text').innerHTML=''">Clear</button>
</div>
  1. Al apuntar a borrar nav-home también se borrará button ya que button es parte de nav-home
  2. Envuelva el texto en un <p> y dele un id para que pueda apuntarlo desde el botón usando document.getElementById()
  3. Solo debe seleccionar .value para los elementos que tienen el atributo value e.g <input>.
0
Chukwuemeka Inya 8 sep. 2018 a las 02:15

Tal vez necesite agregar alguna identificación o clase en su php "Some Text", como

<span id="abc"><?php echo "Some Text"; ?></span>

Para que pueda acceder con jquery o javascript como este botón de clic

onclick="somefunction()"

Y

somefunction() {
  $('#abc').html("");
}
1
Martin Adiputra 8 sep. 2018 a las 01:55

Creo que necesita agregar un poco de jquery para eliminar el texto.

Primero debe colocar el texto dentro del intervalo con el id contenido y borrar el texto dentro del contenido utilizando jquery.

Puedes usar esto.

<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <span id="content"><?php echo "Some text" ?></span>
        <br><br>
        <button class="btn btn-primary" onclick="$('#content').text('');">Clear</button>
</div>
0
JL Barcelona 8 sep. 2018 a las 02:30