JQ implementation of the left-sliding Display Delete button, click Delete Implementation Delete Data feature (recommended) _jquery

Effect chart

First step: Load

<script src= "Js/jquery.min.js" ></script>
<script src= "Js/jquery.mobile-1.3.2.min.js" ></ Script>

Step Two: HTML

<div class= "Item-wrap" >
  <div class= "Item Clearfix" >
    <div class= "Img-item" >
      
    </div>
    <div class= "Txt-item" >
      <p class= "name" >
         small Yellow
      </p> <p class= "txt" > Small yellow people yellow small yellow people small yellow people
      </p>
    </div>
    <i class= " Arrow "></i>
    <a class=" delect-btn "> Delete </a>
  </div>
  <div class=" item Clearfix ">
    <div class=" Img-item ">
      
    </div>
    <div class= "Txt-item" >
      <p class= "name" >
         small yellow person
      </p>
      <p class= "TXT" > Yellow small yellow people small yellow people yellow people
      </p>
    </div>
    <i class= "Arrow" ></i>
    <a class= " Delect-btn "> Delete </a>
  </div>
</div>

Step Two: CSS

. item-wrap{Overflow:hidden;
  Item-wrap. item{border-bottom:1px #fff solid;
  Background: #000;
  width:125%;
  Overflow:hidden;
  position:relative;
  Display:-webkit-box;
 -webkit-transition:all 0.3s linear; 
  }. Item-wrap. Item. img-item{width:50px;
  height:50px;
 margin:10px;
  }. Item-wrap. Item. img-item img{width:100%;
 border-radius:50%;
  }. Item-wrap. Item. txt-item{padding-top:10px;

  margin-right:25px;
  font-size:14px;
  line-height:24px;
  Color: #fff;
 -webkit-box-flex:1;
  }. Item-wrap. Item. arrow{width:0;
  height:0;
  line-height:0;
  font-size:0;
  Border-style:solid;
  Border-color:transparent Transparent transparent #fff;
  border-width:8px 0px 8px 8px;
  Position:absolute;
  right:22%;
  top:50%;
Margin-top: -8px;
  }. delect-btn{width:20%;
  margin-left:15px;
  Color: #fff;
  Background: #0f0;
  z-index:999;
  Display:block;
  Text-align:center;
padding-top:5%; }. Item-wrap. selected{-webkit-transForm:translate (-16%);
-webkit-transition:all 0.3s linear;
 }

Step Two: JQ

<script>
  $ (". Item"). On (' Swipeleft ', function (event) {
    event.preventdefault ();
    /* ACT on the event */
    $ (this). AddClass (' selected '). Siblings ('. Item '). Removeclass (' selected ');
    $ (this). Find ('. delect-btn '). On (' click ', Function (event) {
      event.preventdefault ();
      /* ACT
      on the event/$ (this). Parent (". Item"). Animate ({
        height:0,
        width:0}, +
        , function () {
        /* Stuff to did after animation is complete/
        $ (this). Remove ();
      });};
  })
  ; $ (". Item"). On (' Swiperight ', function (event) {
    event.preventdefault ();
    /* ACT on the event *
    /$ (this). Removeclass (' selected ');
  });

</script>

The above JQ implementation of the left-sliding Display Delete button, click Delete to delete the data function (recommended) is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud habitat community.