Question

我的带有样式显示的div没有点击我想要删除完整div的锚标记

我的div将会点击

代码是

<div class="row" id="mainContainer">
  <div class="col-md-1 col-xs-4">
    <label for="Education">Education</label>
  </div>
  <div class=class="col-md-8 col-xs-8  verticalLine" id="nestedFeilds" style=" margin-left: 10px ;float:left; display: none">
    <a href="" style="color: red;margin-left: auto; ">Delete Education</a>
    <input type="text" placeholder="School Name" class="form-control" id="School_Name" required="" name="School_Name[]"> |
    <br>
    <input type="text" placeholder="Feild of Study" class="form-control" id="feild_Name" required="" name="feild_Name[]">
    <br>
    <input type="text" placeholder="Degree" class="form-control" id="Degree_Name" required="" name="Degree_Name[]">
    <br>
  </div>
</div>
<div class="row" id="2ndmainContainer">
  <div class="col-md-1 col-xs-4"></div>
  <div class="col-md-8 col-xs-8  verticalLine" id="showhere" style=" margin-left: 10px ;float:left;"></div>
  <div style="margin-left: 120px; float:left;"><a id="addNew"> Add Education</a></div>
</div>
</form>

我在点击时发射功能但没有发生任何事情

我的功能是

$(document).ready(function() {
    $('.close-div').on('click', function(){
      alert("hh");
    });     
});

Answer 1

我想我明白你会得到什么，而这只是从你的名字2ndmainContainer拼凑而成，所以希望有一个主要的容器。你需要做的是定位主容器，然后将其中的html空白，或者你可以替换以下的html，

<script>function makeDisappear(){document.getElementByiD('maindiv').outerHTML =''; }</script>

将定位div标签本身并删除任何标签，如果您使用.innerHTML，您可以在标签内放置一些内容。你将它包装在一个锚链接中，该链接与一个保留在里面的目标div元素的函数相关联。 <a click="makeDisappear()"> div in here </a>但我再一次试图从你的问题中把它拼凑起来。更多细节会有所帮助。

Answer 2

您正在使用类来选择锚标记，但您尚未将class属性设置为a html元素。首先在html代码中设置属性...

<a href="" class="close-div" style="color: red;margin-left: auto; ">Delete Education</a>

...然后点击事件应该有效......

$(document).ready(function() {
    $('.close-div').on('click',function() {
        alert("hh");
    });     
});

然后，如果要在单击该锚点时隐藏容器div ...

$(document).ready(function() {
    $('.close-div').on('click',function() {
        $(this).closest('div#nestedFeilds').hide();
    });     
});

...或者如果你想从DOM中删除它......

$(document).ready(function() {
    $('.close-div').on('click',function() {
        $(this).closest('div#nestedFeilds').remove();
    });     
});

注意：你的html代码中有一个拼写错误，你复制了class属性......

<div class=class="col-md-8 col-xs-8 verticalLine" id=...

...只需改变它......

<div class="col-md-8 col-xs-8 verticalLine" id=...

Answer 3

试试这个

从锚标记插入类 close-div 你将在 id =＆＃34; nestedFeilds＆＃34;之后放置锚标记。 格。或者在执行之前要检查的位置将显示。

然后你将遍历父标签，如

   $(".close-div").parents("DIV.your parent class").find(".your wanted class").attr("attrute-name");

Answer 4

首先将div的显示更改为阻止，然后：


    $("#nestedFeilds").on("click","a",function(){
        $("#nestedFeilds").remove();
    });

如何删除样式显示无父div

4 个答案: