javascript - 将 html 添加到文本区域时如何切换添加/删除？

Question

当我单击“添加”按钮时，它应该将所有 html 添加到文本区域中，并且工作正常。但是，如果我再次单击，我应该将其从文本区域中删除。也许一个想法是将插入的 html 插入数组？

$('body').on('click', '.btn_video', function() {
  var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
  $('#usp-custom-5').val(function(_, currentValue) {
    return currentValue + $imageSelected
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
     <div class="col-xs-12 col-md-6">
      <div class="thumbnail">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3fJjajItnEQ?rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen=""></iframe></div><div class="caption">
          <p>Duration: <span class="video-time">31:54</span></p>
          <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
        </div>
      </div>
    </div> 
    <div class="col-xs-12 col-md-6">
      <div class="thumbnail">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/3fJjajItnEQ?rel=0&amp;modestbranding=1" frameborder="0" allowfullscreen=""></iframe></div><div class="caption">
          <p>Duration: <span class="video-time">31:54</span></p>
          <button type="button" class="btn btn-danger btn-block btn_video"><strong>ADD</strong></button>
        </div>
      </div>
    </div>
  </div>
</div>

<textarea name="usp-custom-5" id="usp-custom-5" data-required="false" placeholder="Example Input 5" data-richtext="false" class="usp-input usp-textarea usp-form-16" rows="5" cols="30" style="margin: 0px; height: 266px; width: 996px;"></textarea>

<强> Here it is a Fiddle 。

$('body').on('click', '.btn_video', function() {
  var $imageSelected = $(this).parent().parent().parent().prop('outerHTML');
  $('#usp-custom-5').val(function(_, currentValue) {
    return currentValue + $imageSelected
  });
});

Answer 1

<强> Updated fiddle 。

您可以使用辅助类selected来实现此目的，并通过单击添加/删除它:

$('body').on('click', '.btn_video', function() {
  var content = "";

  if($(this).text()=="ADD")
  {
    $(this).text("REMOVE");
    $(this).parents(".thumbnail").parent().addClass('selected');
  }else{
    $(this).text("ADD");
    $(this).parents(".thumbnail").parent().removeClass('selected');
  }

  $('.selected').each(function(){
    content += $(this).prop('outerHTML');
  });

  $('#usp-custom-5').val(content);
});

希望这有帮助。