Question

使用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时，该元素将被删除。

Answer 1

你需要更改你的html，因为你不能用“:: after”绑定click事件，因为它不是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>

Answer 2

根据您的信息，我建议您使用删除方法：

$('.selectedStuff > div:after').on("click", function() {
  $(element_to_delete).remove();
}

Answer 3

AspNetUsers

Answer 4

将x添加到另一个位置，因为您无法检测伪元素中的事件，例如：after。

X通过css放在首选位置

结果：jsfiddle

  $('#addButton').on('click', function( event ) {
        var searchedValue = $('#search_term').val(); 
        var divHolder = $('.selectedStuff'); 
    $("<div ><div class='bar'>" + searchedValue + "</div><div class=\"close\">X</span></div>").css({

        }).appendTo(divHolder); 

     $('.close').on("click", function() {
            $(this).parent().remove();
    });
    });
    });


.selectedStuff > div{
  width:500px;
  display: table-row;
}

.close{
   display: table-cell; 
   font-family: Arial;
   color: red;
   position:relative;
   right:-20px;
 }

 .bar{
        background-color: yellow;
        width: 400px;
        margin-top: 10px;
        border-style: solid;
        border-color: #0000ff;
        display: table-cell;


        }

Answer 5

检查此答案：Only detect click event on pseudo-element

TL; DR 您不能在伪元素上绑定事件，只需将x插入DOM（例如作为div）并在其上绑定事件。

如何删除元素onclick

5 个答案: