Как лучше всего скрыть не нужные поля?

137

06 марта 2018, 04:53

Доброго времени суток. Поля сайта пополняются через API перебором массива через цикл foreach. Напротив каждого поля есть кнопка "удалить". Суть кнопки скрыть не нужный контент, чтобы была возможность работать с остальным контентов - необходимо чтобы по нажатию "удалить" поле скрывалось, подскажите, пожалуйста, как лучше всего это как реализовать?

<?
foreach($b['response'] as $value) :
if (!$value['text']) continue;
$text = strip_tags ($value['text']); 
extract(str_parse(strip_tags($value['text'])));
?>
  <div class="horisontal-container">
         <div class="full-block-1">
            <input type="text" name="title" value="<? echo  explode(".", $text_clean)[0] ?>" size="48">
            <div class="photo"> 
                <? for($i = 0; $i < 6; $i++) {  ?> 
               <img class="img_content" style="background-image: url(<?= $value['attachments'][$i]['photo']['src_big']?>);">
                <?php } ?>
            </div>
         </div>
         <div class="full-block-2">
            <textarea rows="17" cols="47" name="text" ><? echo  $text_clean; ?></textarea>
         </div>
         <div class="vertical-container">
            <div class="row-item-1"><input type="text" name="name" value="<? echo user($value['signer_id']) ?>" size="30"> </div>
            <div class="row-item-2"><input type="text" name="id" value="vk.com/id<?= strip_tags ($value['signer_id']); ?>" size="30"></div>
            <div class="row-item-2"><input type="text" name="phone" value="<? echo $phone ?>" size="30"> </div>
            <div class="row-item-2"><input type="text" name="price" value="<? echo $price ?>" size="30"> </div>
            <select class="row-item-2">
               <option>Город</option>
            </select>
            <select class="row-item-2">
               <option>Категория</option>
            </select>
            <select class="row-item-2">
               <option>Подкатегория</option>
            </select>
            <select class="row-item-2">
               <option>Подкатегория</option>
            </select>
            <select class="row-item-2">
               <option>Подкатегория</option>
            </select>
         </div>
         <div class="vertical-container buttom-block">
            <a href="#" class="buttom">Отправить</a>
            <a href="#" class="buttom-delete">Удалить</a>
         </div>
         <hr align="center" width="95%" size="1" color="grey" />
      </div>
<?php
endforeach; ?>

Answer 1

function deleteRow(el) { 
  el.closest(".horisontal-container").remove(); 
 
  /* или так если хотите не удалить а скрыть */ 
  //el.closest(".horisontal-container").style.display = "none"; 
 
  return false; 
}

.horisontal-container { 
  background-color: pink; 
  border: 1px solid gray; 
  margin: 5px; 
}

<div class="horisontal-container"> 
  элемент 1 
 
  <div class="vertical-container buttom-block"> 
    <a href="#" class="buttom">Отправить</a> 
    <a href="#" class="buttom-delete" onclick="return deleteRow(this)">Удалить</a> 
  </div> 
 
</div> 
 
<div class="horisontal-container"> 
  элемент 2 
 
  <div class="vertical-container buttom-block"> 
    <a href="#" class="buttom">Отправить</a> 
    <a href="#" class="buttom-delete" onclick="return deleteRow(this)">Удалить</a> 
  </div> 
 
</div> 
 
<div class="horisontal-container"> 
  элемент 3 
 
  <div class="vertical-container buttom-block"> 
    <a href="#" class="buttom">Отправить</a> 
    <a href="#" class="buttom-delete" onclick="return deleteRow(this)">Удалить</a> 
  </div> 
 
</div>