我遇到了关于如何查找特定元素的问题(例如here)的不同解决方案,但它似乎并不直接适用于我。
我要做的是使用jQuery来查找存在于单击的元素上方的特定标记以激活该功能。计划是从中检索文本。
这是我的代码。
$(".fixture-deletion-text, .fixture-deletion-logo").on('click', function() {
//$(this).prev("h3").text()
//$("#me").closest("h3 + div").prev().find('span b')
console.log($(this).closest(".row").prev().find("h3").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="small-12 medium-4 columns">
<h3>Fixture #1</h3>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<label>Date and Time
<input readonly type="text" class="span2 dpt" name="match-dt[]" value="02-12-1989 12:05">
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Team
<select name="team-division[]">
<option value="team-1">1st Team</option>
<option value="team-2">2nd Team</option>
</select>
<div class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Competition
<input id="competition-input" name="competition[]" type="text" />
<div id="competition-error" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-2 columns">
<label>Home/Away
<select name="location[]">
<option value="home">Home</option>
<option value="away">Away</option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<label>Opponents
<input id="opposition-input" name="opposition[]" type="text" />
<div id="opposition-error" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-6 columns">
<label>Venue
<input id="venue-input" name="venue[]" type="text" />
<div id="venue-error" class="error-box"></div>
</label>
</div>
</div>
<div class="test"></div>
<div class="row">
<div class="small-12 columns end">
<img src="images/delete-icon.png" class="fixture-deletion-logo float-right" />
<a class="fixture-deletion-text float-right">Delete Fixture</a>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<h3>Fixture #1</h3>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<label>Date and Time
<input readonly type="text" class="span2 dpt" name="match-dt[]" value="02-12-1989 12:05">
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Team
<select name="team-division[]">
<option value="team-1">1st Team</option>
<option value="team-2">2nd Team</option>
</select>
<div class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Competition
<input id="competition-input" name="competition[]" type="text" />
<div id="competition-error" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-2 columns">
<label>Home/Away
<select name="location[]">
<option value="home">Home</option>
<option value="away">Away</option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<label>Opponents
<input id="opposition-input" name="opposition[]" type="text" />
<div id="opposition-error" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-6 columns">
<label>Venue
<input id="venue-input" name="venue[]" type="text" />
<div id="venue-error" class="error-box"></div>
</label>
</div>
</div>
<div class="test"></div>
<div class="row">
<div class="small-12 columns end">
<img src="images/delete-icon.png" class="fixture-deletion-logo float-right" />
<a class="fixture-deletion-text float-right">Delete Fixture</a>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<h3>Fixture #1</h3>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<label>Date and Time
<input readonly type="text" class="span2 dpt" name="match-dt[]" value="02-12-1989 12:05">
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Team
<select name="team-division[]">
<option value="team-1">1st Team</option>
<option value="team-2">2nd Team</option>
</select>
<div class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Competition
<input id="competition-input" name="competition[]" type="text" />
<div id="competition-error" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-2 columns">
<label>Home/Away
<select name="location[]">
<option value="home">Home</option>
<option value="away">Away</option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<label>Opponents
<input id="opposition-input" name="opposition[]" type="text" />
<div id="opposition-error" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-6 columns">
<label>Venue
<input id="venue-input" name="venue[]" type="text" />
<div id="venue-error" class="error-box"></div>
</label>
</div>
</div>
<div class="test"></div>
<div class="row">
<div class="small-12 columns end">
<img src="images/delete-icon.png" class="fixture-deletion-logo float-right" />
<a class="fixture-deletion-text float-right">Delete Fixture</a>
</div>
我将jQuery示例基于上面的链接,但它不起作用。它是这样的:如果用户点击 fixture-deletion-text / fixture-deletion-logo ,代码会找到下一个 元素点击元素。从那里,我可以弄清楚如何删除特定的夹具。
答案 0 :(得分:4)
您可以尝试将div元素作为整个块的父元素:
<div class="fixture">
<!--fixture code-->
</div>
然后用jquery使用选择器来获得最近的fixture元素:
$(document).ready(function() {
$(".fixture-deletion-text, .fixture-deletion-logo").on('click', function() {
$(this).closest(".fixture").remove();
});
});
Here你有一个有效的例子