1

Доброго времени суток. Поля сайта пополняются через 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; ?>
11
  • @Elena, jq, может лучше developer.mozilla.org/ru/docs/Web/API/ChildNode/remove
    – qwabra
    5 мар 2018 в 12:12
  • 1
    @qwabra чем лучше?
    – yolosora
    5 мар 2018 в 12:15
  • тем что нативный js и не нужно подключать jquery
    – user283873
    5 мар 2018 в 12:19
  • @yolosora, 1. стоит метка "javascript" а не "jq" 2. есть кнопка, на кнопке висит функция. тк строки (контейнеры) генерируются динамически - значит есть переменная где они (контейнеры) хранятся при создании, вот эта переменная и используется в той самой функции на кнопке. удаляемый объект может не иметь ни id ни class
    – qwabra
    5 мар 2018 в 12:19
  • 1
    @Дмитрий, ах, да, если используется JavaScript-фреймворк - напишете его название, метку с названием этого фреймворка прикрепите
    – qwabra
    5 мар 2018 в 12:32

1 ответ 1

2

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>

5
  • Спасибо. То что нужно! 5 мар 2018 в 13:02
  • Internet Explorer&Safari не поддерживаются developer.mozilla.org/ru/docs/Web/API/Element/closest @Дмитрий не спешите
    – qwabra
    5 мар 2018 в 13:03
  • @qwabra Сафари поддерживает, а IE, да не поддерживает, не вижу в этом проблемы. caniuse.com/#feat=element-closest 5 мар 2018 в 13:06
  • @qwabra Если нужна поддержка IE используйте полифил, он в статье что вы привели в ссылке, там даже несколько вариантов 5 мар 2018 в 13:10
  • @qwabra Проект делаю для себя, пользуюсь исключительно хромом. Спасибо 5 мар 2018 в 13:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.