There is a code

$('input[name="city[]"]').click(function() { var checked = $('input[name="city[]"]').is(':checked'); if(checked === true){ $.post("site/cityzone?id="+$(this).val(), function( data ) { $("#city_list").append(data); }); } else { $.post("site/cityzone?id="+$(this).val(), function( data ) { $("#city_list").remove(data); }); } });

The data variable has the following:

 <li class="custom-checkbox"> <input type='checkbox' name='city_zone[]' value='19' id='city_zoneКотовского поселок'> <label for='city_zoneКотовского поселок'>Котовского поселок</label> </li> <li class="custom-checkbox"> <input type='checkbox' name='city_zone[]' value='20' id='city_zoneЛузановка'> <label for='city_zoneЛузановка'>Лузановка</label> </li> <li class="custom-checkbox"> <input type='checkbox' name='city_zone[]' value='21' id='city_zoneПересыпь'> <label for='city_zoneПересыпь'>Пересыпь</label> </li>

By clicking on the checkbox, there is a post request to the server, which returns the html code. It is in the data variable. There is a task, if you click on the checkbox .is(':checked') - then you need to add html code that the server returns - $("#city_list").append(data); , in another case, you need to delete this code that we inserted. How can this be implemented ?? Do I need to send a request to the server again to find out what to delete or not?

Tried a similar method, only $("#city_list").remove(data); - does not work, errors.

  • Possible duplicate question: How to delete an item on the page? - SLy_huh
  • in order to clear the element city_list - you can use the method .empty - Grundy
  • The question here is whether the entire contents of the city_list or only a part of it arrive in data . Option two: parse the flown html, pull the selectors, use these selectors to delete the code on the page (non-optimal method) or change the response format so that it returns only selectors of the elements to be deleted. - br3t
  • I understand correctly that you have several checkboxes (cities) and you want to list their areas (zones) for the selected cities with a general list? - Talleyran

1 answer 1

remove used like this:

 $("#id элемента,который надо удалить").remove();

Those you need by id to find the items you want to delete. For example:

  data = "<li class='custom-checkbox'>\ <input type='checkbox' name='city_zone[]' value='20' id='city_zoneЛузановка'>\ <label for='city_zoneЛузановка'>Лузановка</label>\ </li>\ <li class='custom-checkbox'>\ <input type='checkbox' name='city_zone[]' value='21' id='city_zoneПересыпь'>\ <label for='city_zoneПересыпь'>Пересыпь</label>\ </li>"; $('input[name="city"]').click(function() { var checked = $('input[name="city"]').is(':checked'); if (checked === true) { //закоментировано для теста // $.post("site/cityzone?id=" + $(this).val(), function(data) { $("#city_list").append(data); // }); } else { // $.post("site/cityzone?id=" + $(this).val(), function(data) { $data = $(data) //находим инпуты с id-шниками $data.find('input[type=checkbox]').each(function() { //находим инпуты для удаления и удаляем вместе с родительским li $("#city_list #" + $(this).attr('id')).parent().remove() }) // }); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type=checkbox checked name="city">city</label> <ul id=city_list> <li class="custom-checkbox"> <input type='checkbox' name='city_zone[]' value='19' id='city_zoneКотовского поселок'> <label for='city_zoneКотовского поселок'>Котовского поселок</label> </li> <li class="custom-checkbox"> <input type='checkbox' name='city_zone[]' value='20' id='city_zoneЛузановка'> <label for='city_zoneЛузановка'>Лузановка</label> </li> <li class="custom-checkbox"> <input type='checkbox' name='city_zone[]' value='21' id='city_zoneПересыпь'> <label for='city_zoneПересыпь'>Пересыпь</label> </li> </ul>