根据判断增加和去掉class

选中状态是active。
当active到trol的时候在dot增加一个select，没在的trol的时候dot去掉select

原始：
<div class="dot">
   <span>1</span>
   <span>2</span>
   <span class="trol">3</span>
   <span>4</span>
</div>
效果：
<div class="dot select">
   <span>1</span>
   <span>2</span>
   <span class="trol active">3</span>
   <span>4</span>
</div>

增加class

function addClass(ele,clm){
   if(!hasClass(ele,clm)){
          var space = ele.className == '' ? '' : ' ';
          ele.className = ele.className + space + clm;
   }
}

删除class


function removeClass(ele,clm){
   if(!hasClass(ele.clm)){
       var a = ele.className,  // aa bb cc a b c
           b = a.split(' '),   // aa bb cc a b c
           c = b.indexOf(clm);
       b.splice(c,1);
       b = b.join(' ');
       ele.className = b;
   }
}

判断class是否存在

function hasClass(ele,clm){
    var a = ele.className,  // aa bb cc a b c
        b = a.split(' '),   // aa bb cc a b c
        c = b.indexOf(clm);
    if(c !== -1){
       return true;
    }else{
       return false;
    }
    }

进来学习一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>

  <body>
    <div class="dot">
      <span class="active">1</span>
      <span>2</span>
      <span class="trol">3</span>
      <span>4</span>
    </div>
  </body>
  <script>
    var spans = document.querySelectorAll("span");
    for (var i = 0; i < spans.length; i++) {
      spans[i].onclick = function (e) {
        // 判断当前点击的 class
        if (e.target.getAttribute("class") && e.target.getAttribute("class").indexOf("trol") != -1) {
          document.querySelector(".active").classList.remove("active");
          e.target.classList.add("active");
          var select = document.createElement("select");
          document.querySelector(".dot").appendChild(select);
        } else {
          document.querySelector("select") && document.querySelector("select").remove();
        }
      };
    }
  </script>
</html>

楼主的需求没看明白

$(selector).removeClass(classname)
$(selector).addClass(classname)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
 
  <body>
    <div class="dot">
        <span class="active">标签1</span>
        <span></span>
        <span class="trol">标签2</span>
        <span></span>
     </div>
  </body>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
      $(function(){
        //   $('.trol').mouseover(function(){
        //     $(this).addClass('active');
        //     $(this).append('<select><option>选项一</option><option>选项二</option></select>')
        //   });
        //   $('.trol').mouseout(function(){
        //     $(this).removeClass('active');
        //     $('.dot').find('select').remove();
        //   });
        $('.trol').hover(function(){
            $(this).addClass('active');
            $(this).append('<select><option>选项一</option><option>选项二</option></select>')
        },function(){
            $(this).removeClass('active');
            $('.dot').find('select').remove();
        });
      })
  </script>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="dot">
      <span class="active">A</span>
      <span>B</span>
      <span class="trol">C</span>
      <span>D</span>
    </div>
    <script>
      var dot = document.querySelector('.dot')
      var select = document.createElement('select')

      // 通过事件委托来触发子节点点击
      dot.addEventListener('click', function(e) {
        var active = document.querySelector('.active')
        var target = e.target
        if (target.tagName.toLowerCase() === 'span') {
          active.classList.remove('active')
          target.classList.add('active')
          if (target.className.includes('trol')) {
            dot.classList.add('select')
          } else {
            dot.classList.remove('select')
          }
        }
      })
    </script>
  </body>
</html>