Как удалить html код ? jquery

454

26 января 2017, 03:57

Есть вот код

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

В переменной data примерно следующее

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

По нажатию на чекбокс идет post запрос на сервер, который возвращает html код. Он находится в переменной data. Стоит задача, если клик на чекбокс .is(':checked') - тогда нужно добавить html код которые возвращает сервер - $("#city_list").append(data); , в другом случае нужно удалить этот код, который мы вставили. Каким образом это можно реализовать ?? Нужно ли опять слать запрос на сервер, чтобы узнать что удалять или нет?

Пробовал аналогичным методом, только $("#city_list").remove(data); - не получается, ошибки.

Answer 1

remove используется так:

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

Те вам надо по id найти элементы , которые надо удалить. Например, так:

 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>