Show, detach, css

Benchmark created by BlueWater86 on January 24, 2019

Preparation HTML

<style type="text/css">
button.hide + button {
  display:none;
}
button.hide {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Setup

var btn = $("#btn2"), parent = btn.parent()

Test runner

btn.detach()
btn.appendTo(parent)

btn.hide();
btn.show();

btn.addClass('hide');
btn.removeClass('hide');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by BlueWater86 on January 24, 2019