如何刪除元素onclick

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」綁定，因爲它不是html元素。所以，而不是在「::之後」添加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

根據您的信息，我建議你需要使用remove方法：

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

Answer 3

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

Answer 4

添加X到另一個位置，因爲你不能檢測象僞元素的事件：後。

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）並在其上綁定事件即可。