Форум

fi.adm · #1 (**permalink**) 19.07.2014, 14:51

Есть вот такой js код:

$(document).ready(function (){
	
	$('.element').click(function (){
		$('.text_element',this).remove();
		$('.delete',this).remove();
	});
});

и вот такие контейнеры html:

<div class='element'>
	<div class='text_element'>text_element 1</div>
	<div class='delete'> X</div>
</div>
<div class='element'>
	<div class='text_element'>text_element 2</div>
	<div class='delete'> X</div>
</div>

Код выполняет простую задачу: при клике на содержимое одного из контейнера 'element' блоки 'text_element' и 'delete', относящиеся именно к этому контейнеру удаляются. Все работает как надо. Не устраивает лишь одно. Как сделать так, чтобы блоки (и 'text_element', и 'delete') удалялись только при клике на 'delete' и оставались на месте при клике на 'text_element'? Заранее спасибо.

skrudjmakdak · #2 (**permalink**) 19.07.2014, 15:14

присвоить событие на класс delete. в обработчике надо вам найти родительский элемент и сделать нужное удаление

рони · #3 (**permalink**) 19.07.2014, 15:34

fi.adm,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    $('.element').click(function (event)
  	      {
  	        if($(event.target).is(".text_element")) return;
  	        $('.text_element', this).remove();
  	        $('.delete', this).remove();
  	      }
  	    );
  	  }
  	);
  </script>
</head>

<body>
<div class='element'>
	<div class='text_element'>text_element 1</div>
	<div class='delete'> X</div>
</div>
<div class='element'>
	<div class='text_element'>text_element 2</div>
	<div class='delete'> X</div>
</div>
</body>
</html>

fi.adm · #4 (**permalink**) 19.07.2014, 16:54

Всем спасибо))

JusteG · #5 (**permalink**) 19.07.2014, 20:29

Вот еще решение, если нужно.

$(".delete").click(function(){
$(this).parent().find(".text_element").remove();
$(this).remove;
});

Для большей гибкости при нефиксированном количестве вложений, используйте вместо ".parent()" функцию ".closest(".element")" она в отличии от parent перейдет не на один уровень вверх, а на любое количество пока не дойдет до указанного элемента.

рони · #6 (**permalink**) 19.07.2014, 20:33

JusteG,
если структура как указано выше то можно так

$(".delete").click(function(){
$(this).prev().add(this).remove();
});

JusteG · #7 (**permalink**) 19.07.2014, 20:42

рони, изящно. Спасибо. Простите меня невежду, я недавно пишу на js css (x)html, хотя программист я опытный. Есть к чему стремиться.

Форум

Справочник

Discord чат

Курсы javascript