如何删除onclick元素

Nevershow2016 发表于 Dev

Nevershow2016

使用JavaScript时，我具有一个搜索功能，该功能从数据库中获取信息，然后使用JavaScript将元素添加到我的站点中的框（该元素附近带有叉号）中。我试图这样做，以便当用户在元素附近按下X时，如果他们输入有误，则可以将其删除。

  $('#addButton').on('click', function(event) {
    var searchedValue = $('#search_term').val();
    var divHolder = $('.selectedStuff');
    $("<div>" + searchedValue + "</div>").css({
      'background-color': 'yellow',
      'width': '700px',
      'margin-top': '10px',
      'border-style': 'solid',
      'border-color': '#0000ff'
    }).appendTo(divHolder);

因此，我尝试了某些方法，但似乎无法正常工作。我已经评论了一下。同样，只有当用户单击X时，该元素才会被删除。

瑞尼斯·卡里姆（Ranish Karim）

您需要更改html，因为您不能将click事件与“ :: after”绑定，因为它不是html元素。因此，而不是在“ :: after”上添加CSS来代替它，并在其上应用CSS。

$(document).ready(function() {
  $('.searchFunction').keyup(function(event) {
    var search_term = $("#search_term").val();

    $.post(document.location.href, {
      search_term: search_term
    }, function(data) {
      $('.result').html(data);
    });
  });

  $('.result').on('click', 'li', function(event) {
    var result_value = $(this).text();
    $('#search_term').val(result_value);
    $('.result').html('');
  });

  $('#addButton').on('click', function(event) {
    var searchedValue = $('#search_term').val();
    var divHolder = $('.selectedStuff');
    $("<div>" + searchedValue + "<span>X</span></div>").css({
      'background-color': 'yellow',
      'width': '700px',
      'margin-top': '10px',
      'border-style': 'solid',
      'border-color': '#0000ff'
    }).appendTo(divHolder);

     $('.selectedStuff span').on("click", function(){
       $(this).closest("div").remove();  
     });
  });
});

.selectedStuff > div {
  width: 300px;
}
.selectedStuff span {
  font-family: Arial;
  color: red;
  position: relative;
  float: right;
  right: -20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name='search_term' id="search_term" class="searchFunction">
<input id="addButton" type="button" value="Add">
<div class="dropdown">
  <ul class="result"></ul>
</div>
<div class="selectedStuff"></div>
<div id="markx"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。