How to delete element onclick

Question

Playing with JavaScript, I have a search function which gets information from a database and then uses JavaScript to add the elements to my site in a box with a cross near the element. I am trying to make it so that when the user presses the X, near the element, they can remove it, if they made a mistake.

  $('#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);

So, I tried certain methods, but I cant seem to get it to work. I have commented out the bit. Again, it's just when the user clicks on the X that element will be deleted.

what exact code you have tried? you need 1) select/find element you wish to delete. 2) delete it — llamerr, Mar 14 '16 at 11:51
you cannot detect events on pseudo element, http://stackoverflow.com/a/7478344/4334348 — silviagreen, Mar 14 '16 at 11:53
The answer below is simalr to what i have tried actually, but cant seem to get it to work — Nevershow2016, Mar 14 '16 at 11:56

score 2 · Accepted Answer · answered Mar 14 '16 at 12:09

You need to change your html because you can't bind click event with "::after" as it's is not html element. So rather then adding css on "::after" add span in place of that and apply CSS on it.

$(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>

score 0 · Answer 2 · answered Mar 14 '16 at 11:54

0

Based on your information I suggest you need use remove method:

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

answered Mar 14 '16 at 11:54

Arsenowitch

401
5
22

Which element you want delete? – Arsenowitch Mar 14 '16 at 11:56
So the element which has been added , its a search function, so diffrent elements will be added – Nevershow2016 Mar 14 '16 at 11:57
So there might be like 5 elements added to the list, i want to user to be able to delete the element – Nevershow2016 Mar 14 '16 at 11:57
Just want it so they can press the X button and delete it , if they made a mistake – Nevershow2016 Mar 14 '16 at 11:58

score 0 · Answer 3 · answered Mar 14 '16 at 11:59

0

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

answered Mar 14 '16 at 11:59

aKiRa

116
1
5

Hmm again not working, now i cant even add an element – Nevershow2016 Mar 14 '16 at 12:00
@aKIRa - it would be helpful to describe what you're doing here. – Adam Katz Mar 15 '16 at 00:34

silviagreen · Answer 4 · 2016-03-14T14:17:04.707

Add the x into another position, because you cannot detect events in pseudo-elements like :after.

X is put in the preferred position via css

Result: 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;


        }

Thats great but that x is there a way to make it look like the other X , like postion it in the same place? — Nevershow2016, Mar 14 '16 at 12:02

score 0 · Answer 5 · edited May 23 '17 at 11:59

0

Check this answer: Only detect click event on pseudo-element

TL;DR You can't bind an event on pseudo-element, just insert x to the DOM (e.g. as a div) and bind event on it.

edited May 23 '17 at 11:59

Community

1
1

answered Mar 14 '16 at 12:02

Max Filippov

2,024
18
37

How to delete element onclick

5 Answers5